Ext.data.GroupingStore详解

Ext.data.GroupingStore详解

Ext.data.GroupingStore

继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息

增加了配置属性

groupField : String//用于分组的字段

groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假

remoteGroup : Boolean//远程排序

当然也会多一个group方法

groupBy( String field, [Boolean forceRegroup] ) : void

顾名思义都是重新排序用的
下面是个简单的示例
var arr=[ [1, '本', '拉登'], [2, '笨', '拉登'],[3, '笨', '拉灯'] ];

    var reader = new Ext.data.ArrayReader(

   ...{id: 0},

   [

    ...{name: 'name', mapping: 1},        

    ...{name: 'occupation', mapping: 2}   

    ]);

   

    var store=new Ext.data.GroupingStore(...{

      reader:reader,

      groupField:'name',

      groupOnSort:true,

      sortInfo:...{field: 'occupation', direction: "ASC"} //使用GroupingStore时必须指定sortInfo信息

   });

   store.loadData(arr);
   //GridPanel以后会讨论,这儿使用它是为了直观的表现GroupingStore

   var grid = new Ext.grid.GridPanel(...{

    ds: store,

    columns: [

        ...{header: "name", width: 20, sortable: true,dataIndex: 'name'},

        ...{header: "occupation", width: 20,sortable: true, dataIndex: 'occupation'}

    ],

    view: new Ext.grid.GroupingView(...{

        forceFit:true,

        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'

    }),

    frame.:true,

    width: 700,

    height: 450,

    collapsible: true,

    animCollapse: false,

    title: 'Grouping Example',

    renderTo: 'Div_GridPanel'

    });