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", 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'

});

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,

root:'rows',

fields:['id','name','occupation']

})

//目前请先略过gridpanel,以后再说

var grid = new Ext.grid.GridPanel( {

ds: store,

columns: [

{header: "id", width: 200, sortable: true,dataIndex: 'id'},

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

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

],height:350,

width:620,

title:'Array Grid',

renderTo: 'Div_GridPanel'

});

Ext.data.SimpleStore

从数组对象更方便的创建Store对象,

例

var store=new Ext.data.JsonStore( {

data:[

[1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist']

],

autoLoad:true,

fields:[ {name: 'name', mapping: 1}, {name:'occupation',mapping:2}]

})

var grid = new Ext.grid.GridPanel( {

ds: store,

columns: [

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

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

],height:350,

width:620,

renderTo: 'Div_GridPanel'

});

作者姓名：blackant2

作者博客：http://blog.csdn.net/blackant2