Ext.JS GroupingViewをAjaxでJSON形式で扱ってみる

sc0003.png

Ext.JSでグルーピング表示のサンプルがあったので、使ってみました。以下Ext.JSのサンプルページ

http://extjs.com/deploy/dev/examples/grid/grouping.html

集計もやってみましたが、集計はまだExt。JSには実装されていないようで、サンプルページのJavascriptからいただいて実装していますが、割愛させていただきます。

ソース中に静的に書かれたデータをds(以降、データストア)に読み込み、GroupingViewで表示するサンプルでしたが、このデータをAjaxで取得して動的に更新できないものかやってみました。

まず、AjaxでJSON形式のデータを取得するので、dsにJsonStoreを使おうとしましたが、できませんでした。

そもそも、グルーピングの基本は、dsにGroupingStore(Ext.data.GroupingStore)を使わなければなりませんでした。以下サンプルです。

補足:指定期間のデータを取得してきて、「division」フィールドでグルーピングします。sort情報(sortInfo)という項目ですが、必須のようです。なので、データにtypeがあり、そのtypeで昇順にソートを指定してます。listenersのbeforeloadでds.load()される前に、textFiled(monthDate)の値を取得してセットしています。

ds = new Ext.data.GroupingStore({
proxy    : new Ext.data.HttpProxy({
url        :     ‘/ajax.php’, // ajaxでjsonを返却するもの指定
method    :    ‘POST’
}),
baseParams : {
dateFrom            : ‘20080406’,
dateTo                : ‘20080412’
},

reader    : new Ext.data.JsonReader({
root : ‘results’,  // JSONのrootタグをresultsとしてます。
totalProperty : ”
},  rec  //rec は別途Ext.data.Record.createで作ったレコードの型
),
groupField    : ‘division’, // divisionでグループ化
sortInfo    : {field:”type”,direction:”ASC”},
listeners:    {
‘beforeload’    :     function(){
var month = Ext.get(‘monthDate’).getValue();
if(month != “”){
this.baseParams.dateFrom     =month;
}
}
}

あとは、dsをExt.grid.GridPanelのstoreで指定します。

次にExt.grid.GridPanelのview部分ですが、
view : new Ext.grid.GroupingView({
hideGroupedColumn : true
})
で、グループ化したフィールドを非表示にできます。そのあたりは、サンプルにもあるので、割愛します。

データストア(ds)という、データが保存されている場所とそれらを表示するGridなどのビューの部分の関係がすこしば
かりわかったきがしました。

コメントを残す

%d人のブロガーが「いいね」をつけました。