ExtJs中Store的种类

红太狼 2022-07-21 12:22 127阅读 0赞

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实例**

JScript 代码    复制

var store = new Ext.data.ArrayStore({ fields: ['name','age'], data: [ ['tom',18], ['cat',20] ] });

五、**Ext.data.SimpleStore**实例

SimpleStore=Store+MemoryProxy+ArrayReader

SimpleStore是不需要写load()方法

JScript 代码    复制

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()方法

JScript 代码    复制

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配置项**

JScript 代码    复制

view: new Ext.grid.GroupingView({ enableGroupingMenu:false, groupByText:'分组', showGroupsText:'显示', hideGroupedColumn:true, forceFit:true, groupTextTpl: '{text} ({[values.rs.length]}条数据)' }),

**分组本地数据**

JScript 代码    复制

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' } });