CATの新コントロール紹介

こんにちは。CAT開発チームの水口です。
第2回ブログ記事です。

CATはフィルターやグルーピングなどのリッチな機能を持ったグリッドテーブルなど、様々なUIコントロールを使用しています。以下は、BTS画面が持つグリッドテーブルのスクリーンショットです。

cat_m_s

このUIを実現するためにさまざまなライブラリを使っており、その中の1つにExt JSがあります。
現在、CATではExt JS 4.2を利用していますが、最新版のExt JS 6.0へのバージョンアップを計画しています。
そこで今回は、このバージョンアップで便利になる新機能、変更点を2つご紹介します。

1.よりExcelライクなセル操作

これはExcelのセル端を選択してのドラッグ操作を実現したUIです。
Ext JS 5.1で追加された Spreadsheet Selection Model を活用しています。

CATスプレッドシート
動くデモはこちら[外部リンク]

オンラインケース編集やテスト予定入力での、同じデータのコピー操作や連番入力などの
シーンで効率が上がると思います。

2.テーブルの表現力向上

CATではグリッドテーブルにUIコントロールを配置する際、独自にカスタマイズしていました。
新しいExt JS 5.0からカスタマイズの手間なしにグリッドテーブルにUIコントロールを配置できるようになりました。

widget
動くデモはこちら[外部リンク]

限られた領域の中でより豊かな表現がスピーディに実現できるのは非表に良いですね。
詳細進捗画面などに、より多くの情報を、よりスマートに伝わるようなUIとして組み込むのに活用する予定です。

まとめ

これらの機能を実際の製品に組み込む際には、もっとカスタマイズして他機能とシームレスにする予定です。
ご期待下さい!

CATに「こういったUIで表現すると分かり易いね」、「こういったUIが実現できると作業効率が良くなるね」、などありましたら、CAT開発チームにお知らせ下さい。
案外素早く実現されるかもしれませんよ!?


2015-10-26 | Posted in CAT, ExtJSNo Comments » 
Comment





Comment