ExtJs中Store的种类
ExtJs中Store的种类一、什么store
Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类)，最终主要用于提供给panel去显示.
Store由Proxy（数据源）和DataReader（解读数据）组成
1、(Proxy)数据源：一般是后台的值，习惯性的把它转换成json对象给store
2、(DataReader)读取数据：获得了数据后需要解析数据，DataReader(fields属性其实是Record对象的)解析数据并指定格式.
二、store传参的几种方法
//第一种
var store = new Ext.data.Store({
baseParams: {
params1 : '1',
params2 : '2'
}
});
//第二种
var params = {start:0,limit:limit};
store.load({params: params});
//第三种
store.load({
params:{
start:0,
limit:10
}
});
//第四种
store.baseParams=params;
baseParams:
三、Ext.data.Store实例
var store = new Ext.data.Store({
/*
proxy的作用是通过内存获取原始数据,然后将获取的数据交给对应的读取器进行处理
MemoryProxy只能从Javascirp对象获取数据,可以直接把数组或者JSON和XML格式的数据交给他处理
*/
proxy : new Ext.data.MemoryProxy([
['tom',18],
['cat',20]
]),
//用于将原始数据转换成record实例
reader : new Ext.data.ArrayReader({
fields : [
{name : 'name',type : 'string'},
{name : 'age',type : 'int'}
]
})
});
store.load();
四、Ext.data.ArrayStore实例
var store = new Ext.data.ArrayStore({
fields: ['name','age'],
data: [
['tom',18],
['cat',20]
]
});
五、Ext.data.SimpleStore实例
SimpleStore=Store+MemoryProxy+ArrayReader
SimpleStore是不需要写load()方法
var store = new Ext.data.SimpleStore({
data : [
['tom',18],
['cat',25]
],
fields : [
{name : 'name',type : 'string'},
{name : 'age',type : 'int'}
]
});
六、Ext.data.JsonStore实例
JsonStore=Store+HttpProxy+JsonReader
JsonStore需要写load()方法
var store = new Ext.data.JsonStore({
url : 'list。ashx',
root : 'root',
fields : [
{name : 'name',type : 'string'},
{name : 'age',type : 'int'}
]
});
store.load();
其中从 list。ashx获取的数据如：
[{'id':1,'name':'小王','sex':'男'}, {'id':2,'name':'小李','sex':'男'}, {'id':3,'name':'小兰','sex':'女'} ];
七、Ext.data.GroupingStore对数据分组
store.groupBy('sex');//重新对sex进行分组
store.clearGrouping();//清除分组
如果使用GroupingStore就要给grid设置view配置项
view: new Ext.grid.GroupingView({
enableGroupingMenu:false,
groupByText:'分组',
showGroupsText:'显示',
hideGroupedColumn:true,
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]}条数据)'
}),
分组本地数据
var store = new Ext.data.GroupingStore({
data : [
['tom',18,'男'],
['cat',25,'女'],
['team',18,'男'],
['jock',26,'女']
],
reader : new Ext.data.ArrayReader({
fields : [
{name : 'name',type : 'string'},
{name : 'age',type : 'int'},
{name : 'sex',type : 'string'}
]
}),
groupField : 'age',//设置分组字段
sortInfo : {
field : 'age',
direction : 'desc'
}
});