ExtJs中Store的种类

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