ExtJS 之 Store数据集 博客分类： js EXTjson
程序员文章站
2024-02-18 10:54:22
...
1. Ext.data.Store
Ext.onReady(function(){
//定义Json格式的内存数据变量
var data = {
results : 5,
rows : [
{ id : 0 , name : 'tom' , age : 24 },
{ id : 1 , name : 'jack' , age : 18 }
]
};
//创建记录类型Person
var Person = Ext.data.Record.create([
{name: 'personId',mapping:'id'},
{name: 'personName',mapping:'name'},
{name: 'personAge',mapping:'age'}
]);
//定义JsonReader的元数据对象
metedata = {
totalProperty: "results",
root: "rows",
id: "id"
}
//创建JsonReader数据解析器
var JsonReader = new Ext.data.JsonReader(metedata,Person);
//创建内存代理
var memoryProxy = new Ext.data.MemoryProxy()
//创建数据集对象
var store = new Ext.data.Store({
proxy : memoryProxy,//设置数据集加载数据的代理对象
reader : JsonReader,//设置数据集解析数据的数据解析器
listeners :{
load : loadCallBack
}
})
//定义数据加载完成事件的处理函数
function loadCallBack(store,records,options ) {
var msg = '数据集Store使用示例\n';
//遍历数据集中的所有记录
store.each(function(record){
var id = record.get('personId');
var name = record.get('personName');
var age = record.get('personAge');
msg += ('id:' + id + ' name:'+name+' age:'+age +'\n');
})
alert(msg);
}
//加载数据
store.loadData(data);
});
2. Ext.data.SimpleStore
Ext.onReady(function(){
//定义数组数据
var data = [[1,'张三',24],[2,'李四',30],[3,'王五',29]];
//创建数据集对象
var simpleStore = new Ext.data.SimpleStore({
id : 0,
fields : [
{name: 'personId',mapping:0},
{name: 'personName',mapping:1},
{name: 'personAge',mapping:2}
],
listeners :{
load : loadCallBack
}
})
//定义数据加载完成事件的处理函数
function loadCallBack(store,records,options ) {
var msg = '数据集SimpleStore使用示例\n';
//遍历数据集中的所有记录
store.each(function(record){
var id = record.get('personId');
var name = record.get('personName');
var age = record.get('personAge');
msg += ('id:' + id + ' name:'+name+' age:'+age +'\n');
})
alert(msg);
}
//加载数据
simpleStore.loadData(data);
});
3. Ext.data.JsonStore
Ext.onReady(function(){
//定义Json数据对象
var data = {
rows : [
{ id : 0 , name : 'tom' , age : 24 },
{ id : 1 , name : 'jack' , age : 18 }
]
};
//创建数据集对象
var jsonStore = new Ext.data.JsonStore({
root: "rows",
data : data,//配置要加载的初始化数据
fields : [
{name: 'personId',mapping:'id'},
{name: 'personName',mapping:'name'},
{name: 'personAge',mapping:'age'}
],
listeners :{
load : loadCallBack
},
autoLoad:true//初始化后自动加载数据
})
//定义数据加载完成事件的处理函数
function loadCallBack(store,records,options ) {
var msg = '数据集JsonStore使用示例\n';
//遍历数据集中的所有记录
store.each(function(record){
var id = record.get('personId');
var name = record.get('personName');
var age = record.get('personAge');
msg += ('id:' + id + ' name:'+name+' age:'+age +'\n');
})
alert(msg);
}
});
4. Ext.data.GroupingStore
Ext.onReady(function(){
//定义数组数据对象
var data = [[1,'张三',24],[2,'李四',30],[3,'王五',30],[4,'赵六',24]];
//定义记录类型
var Person = Ext.data.Record.create([
{name: 'id',mapping:0},
{name: 'name',mapping:1},
{name: 'age',mapping:2}
]);
//创建数据解析器
var arrayReader = new Ext.data.ArrayReader({id:0},Person);
//创建内存代理
var memoryProxy = new Ext.data.MemoryProxy()
//创建GroupingStore数据集对象
var groupingStore = new Ext.data.GroupingStore({
autoLoad : true,
data : data,
groupField:'age',//指定分组字段
groupOnSort:false,//分组时不重新排序
sortInfo:{field: 'id', direction: "ASC"},//指定排序规则
proxy : memoryProxy,
reader : arrayReader
})
//创建表格组件
new Ext.grid.GridPanel({
title : '分组数据集',
applyTo : 'group-grid',
store : groupingStore,
width : 310,
height : 200,
columns :[
{header:'ID',dataIndex:'id'},
{header:'姓名',dataIndex:'name'},
{header:'年龄',dataIndex:'age'}
],
view: new Ext.grid.GroupingView({
forceFit:true
})
})
});