[转载]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
'



}

);

链接自:http://www.phpweblog.net/susam119/archive/2007/12/07/2486.html