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などのビューの部分の関係がすこしばかりわかったきがしました。
コメントする