EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore

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",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' }); Ext.data.JsonStore 也是Store子类,目标是更方便的使用json对象做数据源 构造中多了fields,root,用法如下例所示 /**//* 这是使用远程对象,返回内容与下面本地对象的data一致 var store=new Ext.data.JsonStore({ url:'jsoncallback.js',root:'rows',fields:['id','name','occupation'] }); store.load(); */ var store=new Ext.data.JsonStore(...{ data:...{ 'results': 2,'rows': [ ...{ 'id': 1,'name': 'Bill',occupation: 'Gardener' },...{ 'id': 2,'name': 'Ben',occupation: 'Horticulturalist' } ]},autoLoad:true,'occupation'] }) //目前请先略过gridpanel,以后再说 var grid = new Ext.grid.GridPanel(...{ ds: store,columns: [ ...{header: "id",width: 200,dataIndex: 'id'},...{header: "name",height:350,width:620,title:'Array Grid',renderTo: 'Div_GridPanel' }); Ext.data.SimpleStore 从数组对象更方便的创建Store对象,例 var store=new Ext.data.JsonStore(...{ data:[ [1,'Bill','Gardener'],'Ben','Horticulturalist'] ],fields:[...{name: 'name',...{name:'occupation',mapping:2}] }) var grid = new Ext.grid.GridPanel(...{ ds: store,renderTo: 'Div_GridPanel' });