store是一个为Ext器件提供record对象的存储容器,每个store最少需要两个组件的支持,分别是proxy和reader,proxy用于从某个途径读取原始数据,reader用于将原始数据转换成Record实例,下面介绍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;
三、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]
]
});
![](https://i-blog.csdnimg.cn/blog_migrate/bf331a4111ab064b56e53dc20f611672.gif)
五、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'}
]
});
![](https://i-blog.csdnimg.cn/blog_migrate/bf331a4111ab064b56e53dc20f611672.gif)
六、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();
![](https://i-blog.csdnimg.cn/blog_migrate/bf331a4111ab064b56e53dc20f611672.gif)
其中从 list。ashx获取的数据如:
[{'id':1,'name':'小王','sex':'男'}, {'id':2,'name':'小李','sex':'男'}, {'id':3,'name':'小兰','sex':'女'} ];
七、Ext.data.GroupingStore对数据分组
store.groupBy('sex');//重新对sex进行分组
store.clearGrouping();//清除分组
![](https://i-blog.csdnimg.cn/blog_migrate/bf331a4111ab064b56e53dc20f611672.gif)
如果使用GroupingStore就要给grid设置view配置项
view: new Ext.grid.GroupingView({
enableGroupingMenu:false,
groupByText:'分组',
showGroupsText:'显示',
hideGroupedColumn:true,
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]}条数据)'
}),
![](https://i-blog.csdnimg.cn/blog_migrate/bf331a4111ab064b56e53dc20f611672.gif)
分组本地数据
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'
}
});