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: @H_301_171@... {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: ' GroupingExample ' ,
renderTo: ' Div_GridPanel '
} );
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: @H_301_171@... {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: ' GroupingExample ' ,
renderTo: ' Div_GridPanel '
} );
Ext.data.JsonStore
也是Store子类,目标是更方便的使用json对象做数据源
构造中多了fields,root,用法如下例所示
/*
这是使用远程对象,返回内容与下面本地对象的data一致
varstore=newExt.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 ,dataIndex: ' id ' } ,
{header: " name " ,
{header: " occupation " ,height: 350 ,
width: 620 ,
title: ' ArrayGrid ' ,
renderTo: ' Div_GridPanel '
} );
这是使用远程对象,返回内容与下面本地对象的data一致
varstore=newExt.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 ,dataIndex: ' id ' } ,
{header: " name " ,
{header: " occupation " ,height: 350 ,
width: 620 ,
title: ' ArrayGrid ' ,
renderTo: ' Div_GridPanel '
} );
Ext.data.SimpleStore
从数组对象更方便的创建Store对象,
例
varstore
=
new
Ext.data.JsonStore(
{
data:[
[ 1 , ' Bill ' , ' Gardener ' ],[ 2 , ' Ben ' , ' Horticulturalist ' ]
],
fields:[ {name: ' name ' ,mapping: 1 } , {name: ' occupation ' ,mapping: 2 } ]
} )
vargrid = new Ext.grid.GridPanel( {
ds:store,
columns:[
{header: " name " ,
{header: " occupation " ,
renderTo: ' Div_GridPanel '
} );
data:[
[ 1 , ' Bill ' , ' Gardener ' ],[ 2 , ' Ben ' , ' Horticulturalist ' ]
],
fields:[ {name: ' name ' ,mapping: 1 } , {name: ' occupation ' ,mapping: 2 } ]
} )
vargrid = new Ext.grid.GridPanel( {
ds:store,
columns:[
{header: " name " ,
{header: " occupation " ,
renderTo: ' Div_GridPanel '
} );