Ext JS 3.3 Beta 2 がリリース

2010/08/16 by yuki

Ext JS 3.3 beta 2がリリースされました。今回のリリースでは前回のリリースで報告されたバグの修正、PivotGridとCalendarコンポーネントの改善が行われています。

さらに今回のリリースにおいて初めてサンプルディレクトリ以下に格納されているUXクラスについてもAPIドキュメントに含めました。これらのUXクラスには今回のCalendarコンポーネントから各種の実験的なものまで様々なものが含まれています。これらの追加ドキュメンテーションについては今回のSDKより利用可能となっています

Ext JS3.3のリリースに先立ち、新しく追加されたコンポーネントの利用方法についてのブログを2件、掲載する予定です。まず最初は、今回のPivotGridについて、そして次回はCalendarコンポーネントの使い方について解説していきます。

Ext JS 3.3 beta 2をダウンロード

PivotGridを理解する

PivotGridは大量のデータ（例：企業の売り上げデータ）を要約するためのツールであり、また、そのデータの意味するところを理解するためのツールでもあります。PivotGridはデータの中に存在する共通部分（例：2010年のサンフランシスコでの売り上げ）を探し出し、まとめます（通常は集計します）。

PivotGridについて説明するにはサンプルを使うのが一番簡単なので、サンプルを3つ作ってみました。最初のサンプルでは300件の架空の売り上げデータが存在します（データはこちら）。営業担当者別、年度別の成績を表示するために、PivotGridを次のように設定しました：営業担当者と製品を左側に、年度と都市を上部に。

PivotGridは設定条件にマッチするレコードを探し出し、aggregatorを使ってまとめ処理を行います。このサンプルでは、営業担当者がそれぞれの製品を年度別にそれぞれの都市でいくつ売ったか、を表示しています。このPivotGridの設定はとても簡単です：

var SaleRecord = Ext.data.Record.create([
    {name: 'person',   type: 'string'},
    {name: 'product',  type: 'string'},
    {name: 'city',     type: 'string'},
    {name: 'state',    type: 'string'},
    {name: 'month',    type: 'int'},
    {name: 'quarter',  type: 'int'},
    {name: 'year',     type: 'int'},
    {name: 'quantity', type: 'int'},
    {name: 'value',    type: 'int'}
]);
 
var myStore = new Ext.data.Store({
    url: 'simple.json',
    autoLoad: true,
    reader: new Ext.data.JsonReader({
        root: 'rows',
        idProperty: 'id'
    }, SaleRecord)
});
 
var pivotGrid = new Ext.grid.PivotGrid({
    title     : 'PivotGrid example',
    store     : myStore,
    aggregator: 'sum',
    measure   : 'value',
 
    leftAxis: [
        {dataIndex: 'person',  width: 80},
        {dataIndex: 'product', width: 90}
    ],
 
    topAxis: [
        {dataIndex: 'year'},
        {dataIndex: 'city'}
    ]
});

GridやDataViewに対して設定するのと同じように、PivotGridに対しても最初にExt.data.Storeを設定します。このStoreに対して、指定したURLからダウンロードするJSONデータにマッチするRecord定義を渡しています。

PivotGridそのものは一般的なGridと同じように設定を行います。titleやstoreといったプロパティだけでなく、Gridでサポートされているほとんどのオプションをプロパティとして設定することが可能です。これらに加えて、PivotGrid独自の新しいオプションがいくつか追加されているだけです：

store – 上記で作成したStore
measure – まとめる対象となるデータフィールドの名称（今回のサンプルでは「value」）
aggregator – データをまとめるための関数。詳細はAPIドキュメントを参照（英語）
leftAxis – まとめたデータの表示単位となるフィールド。表の左側。
topAxis – まとめたデータの表示単位となるフィールド。表の上部。

measureと2つの軸（leftAxisとtopAxis）に指定するものはStoreのRecordとして定義されたものである必要があります。aggregatorについては予め定義されている5つの関数（sum、count、min、max、avg）か、あるいは独自の関数が利用可能です（レコードの配列が引数として渡されます）。

Renderers

Gridで表示データをカスタマイズする際にrendererを利用するのと同じように、PivotGridでもrendererが利用できます。PivotGridサンプルの一つでは架空の人々の身長についてまとめています。身長データについてはフィートとインチで記述されているのですが、平均を返すaggregator関数（avg）は10進法で計算してしまうため、計算結果を小数点付きのフィートで返してしまいます。rendererを使えば、計算結果をフィートとインチで表示させることができます。：

new Ext.grid.PivotGrid({
    store     : myStore,
    aggregator: 'avg',
    measure   : 'height',
 
    //小数点付きフィートをフィートとインチに変換
    renderer  : function(value) {
        var feet   = Math.floor(value),
            inches = Math.round((value - feet) * 12);
 
        return String.format("{0}' {1}\"", feet, inches);
    },
    //以下、その他の設定
});

セルの見た目

もう1つのPivotGridのサンプルではコンテンツに応じてセルの見た目をカスタマイズする方法を示しています。このサンプルでは世界中の各国でのビジネスコストを検証していて、それぞれの相対値に応じたセルの色分けを簡単に実現しています：

new Ext.grid.PivotGrid({
    store     : myStore,
    aggregator: 'avg',
    measure   : 'height',
 
    viewConfig: {
        getCellCls: function(value) {
            if (value < 20) {
                return 'expense-low';
            } else if (value < 75) {
                return 'expense-medium';
            } else {
                return 'expense-high';
            }
        }
    },
    //以下、その他の設定
});

ランタイムでの再設定

PivotGridは実行時においても再設定が可能です。それぞれの軸について再計算を行ったり、rendererを適用したり、cellの見た目を変更したり、といったことが自動的に実行されます。これは、ユーザーが開発者に対して新たなコンポーネントの開発を依頼することなく、ユーザー自身で必要に応じて必要な方法でデータをまとめることが可能ということです。下記がその方法です：

//左側の軸についても変更可能
pivot.topAxis.setDimensions([
    {dataIndex: 'city', direction: 'DESC'},
    {dataIndex: 'year', direction: 'ASC'}
]);
 
pivot.setMeasure('value');
pivot.setAggregator('avg');
 
pivot.view.refresh(true);

左側および上部の両方の軸、measureおよびaggregatorのいずれも実行時に変更可能です。全ての計算はブラウザ側で行われるため、再設定後もサーバー側からデータを再取得する必要がありません。この機能により、ユーザーはデータをどのような方法にでも料理できることになります。

この記事は 2010年08月16日の 5:47 pm に投稿されました。この記事のカテゴリーは Ext JS, お知らせです. この記事への反応は RSS 2.0で取得することができます。