您的位置：首页 > Web前端 > extjs > 正文

ExtJs中Store的种类

更多时间：2014-5-17 类别：Web前端浏览量：6678

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传参的几种方法

JScript 代码复制

//第一种
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实例

JScript 代码复制


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

标签：Store extjs

上一篇：如何提升代码质量

下一篇：还有什么问题要问我们的吗，如何回答

您可能感兴趣

ExtJs中Store的种类

ExtJs中Store的种类

热门推荐

排行榜