ExtJS 之 Store数据集

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

                            })

                   })

         });

评论

3 楼 atgoingguoat 2011-03-22  

我只是为中国源代码开放走了一小步。哈哈。

2 楼 uuu999ggg 2011-03-22  

同是store ,store这样写,JsonStore确要那样写才行 。。。哎

1 楼 uuu999ggg 2011-03-22  

伟大的博主 解决了我一个大问题 谢谢了

   var store = new Ext.data.Store({})

  我用的是 var store = new Ext.data.JsonStore({})就不行  整了我一上午