Storeでのマルチソートとフィルター

Ext JS 3.2ではExt.data.Storeに複数キーでのソート（マルチソート）およびフィルター機能を追加しました。これまでのStoreではソート/フィルターは1つのフィールドでのみ可能でしたが、新しいStoreでは複数のキーでのソート/フィルターが行えます。新しく追加したマルチソートのデモではGridパネルを使ってこの機能を紹介しています。ツールバー上のボタンをクリックしてソート順（昇順、降順）を変更したり、ボタンそのものをマウスでドラッグしてソートキーの優先順位を変更することができます。さらに、Gridパネルのヘッダー部分をツールバー上にドラッグ&ドロップすることにより、ソートキーを追加することも可能です。

DataViewにおける並べ替えアニメーション

Ext.DataViewはExt.data.Store内のデータをユーザーにとって最適な形で表示するための非常に便利なGUI部品です。3.2ではそのExt.DataViewが並べ替えのアニメーション効果を実現するプラグイン（DataViewTransition）によってさらに進化しています。 Ext.DataView内のアイテムはStoreの更新・変更に応じて自動的に自分自身を新しい場所にスライドしながら移動したり、あるいはフェードイン、フェードアウトしていきます。（Ext Japanコメント：何週間か前にideaxideaで紹介されていたアイコンがダイナミックに移動するメニューを作れるjQueryのプラグイン『jQuery Quicksand plugin』を見て、こういうのExtにも欲しいなと思っていたら..　流行のUIなのでしょうか？）

今回この機能のデモのためのサンプルを2つ用意しました – 1つ目はDataViewとStoreのマルチソート機能を組み合わせたものです. 2つ目のは新しくなったSliderを使って特定の範囲にデータを絞り込むサンプルです。

Composite Field

これまでフォームにおいて一つの行に複数のフィールドを配置するというのは簡単そうで結構面倒でした。今回追加されたCompositeFieldを使えばこの問題が簡単に解決できるはずです。CompositeFieldではHBoxレイアウトが組み込まれていて、複数のフィールドを1つの行の中にきれいに配置してくれます。こちらのサンプルをご覧ください。また、APIドキュメントのCompositeFieldについても確認してみてください。

CompositeFieldの利用はとても簡単です:

new Ext.form.FormPanel({
    items: [
      {
          xtype: 'compositefield',
          fieldLabel: 'Full Name',
          items: [
              {xtype: 'textfield', name: 'title',     width: 40},
              {xtype: 'textfield', name: 'firstName', flex : 1},
              {xtype: 'textfield', name: 'lastName',  flex : 2}
          ]
      },
      //残りのコード
    ]
});

Sliderの改良

あまり目立ちませんがExtにはSliderというクラスがしばらく前から加わっています。決まった範囲の中から数値を選択するといった用途にSliderは適しています。3.2ではこのSliderに任意の数の「つまみ」を設定できるようになりした。これによって、数値の範囲選択を一つの部品だけで行ってもらうことが可能になります。

SliderはSliderFieldとしてフォーム内に配置することも可能です。数値入力を受け付ける為のNumberFieldの代替部品としての利用が考えられます。

Toolbar用プラグイン

3.2のサンプル用に作成したToolbar用のプラグインもあわせて公開します。1つ目はToolbarReordererで、 これはToolbar内のアイテムをドラッグ&ドロップで再配置可能にします。2つ目はToolbarDroppable、これはToolbarをDropTargetにすることにより、ToolbarにDropされたアイテムをボタン化します。

アクセシビリティ用テーマ

アクセシビリティ用テーマは米国リハビリテーション法第508条（Wikipedia）に対応するようにデザインされています。大きな文字サイズ、暗い背景に明るい色の文字、などが特徴です。視覚障害をお持ちのユーザー向けには、このハイコントラストのテーマが利用可能です。

品質管理： ユニットテスト

上記全てに加えて、3.1から3.2へのアップグレードでは180以上のバグ修正とフレームワークの全てにおいての改善が行われています。我々開発チームでは、Ext JSというライブラリはまずなによりも開発者が想定した通りに動く、ということが一番大切だと分かっています。このことが、本日最後の発表内容となる下記の品質管理につながっています。

我々の内部品質管理の手順は3.1以降大きな改善を果たしました。まず、最初の大きなステップとしてユニットテストを自動化するための仕組みを取り入れました。我々の開発者は今年の1月以降、約300のテストケースを作成し、フレームワークの全てのレベル、全ての機能についてテストを行っています。独自に構築したテスト環境においては、サポート対象の全てのブラウザおよびOSに対して継続的にテストが実行されており、何か問題が発生した場合は自動的に通知がされるようになっています。新しく追加されるコードは、新機能であってもバグ修正であっても、この方法でテストされることになります。

我々はExt JSが世界中のWebアプリケーションフレームワークのリーダーであり続けることを目標としています。ユニットテストはこの目標を実現するための一部であり、Extが描画速度、実行速度においてナンバーワンであり続けるために行っていることを今後数ヶ月以内にご報告できることと思います。

Ext JS 3.2ベータ版をぜひダウンロードして このブログのコメント欄、フォーラム、あるいはTwitter等で感想、お気づきをお寄せください。

Ext JS 3.2 ベータ版をダウンロード