Ext.data.xxxStore 数据解析的简单运用

      做任何的应用程序都少不了对数据的操作。在Extjs里面对数据的解析主要由是Ext.data.Store来做。今天接触了Ext.data.ArrayStore 和Ext.data.JsonStore. 从命名上就知道它们所解析的格式是不同的。所以当我们需要哪种格式来填充我们的组件的时候，我们可以让设计后台传过来的格式，符合我们解析就格式就OK了。看下API中的例子便可一目了然。

Code:

1. 一个store配置项看起来如下: 
2. var store = new Ext.data.JsonStore({  
3.     // store configs  
4.     autoDestroy: true,  
5.     url: 'get-images.php',  
6.     storeId: 'myStore',  
7.     // reader configs  
8.     root: 'images',  
9.     idProperty: 'name',  
10.     fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]  
11. });  
12.           
13.   
14. 此store被配置用来解析如下的格式的对象:   
15.   
16. {  
17.     images: [  
18.         {name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},  
19.         {name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}  
20.     ]  
21. }  
22.           
23. 一个符合此格式的字符串也可以用作 data 配置项。   

Code:

1. Store的配置就像如下代码所示:   
2.   
3.               
4. var store = new Ext.data.ArrayStore({  
5.     // store configs  
6.     autoDestroy: true,  
7.     storeId: 'myStore',  
8.     // reader configs  
9.     idIndex: 0,    
10.     fields: [  
11.        'company',  
12.        {name: 'price', type: 'float'},  
13.        {name: 'change', type: 'float'},  
14.        {name: 'pctChange', type: 'float'},  
15.        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}  
16.     ]  
17. });  
18.           
19.   
20. 此Store被配置用来解析如下格式的对象:   
21.   
22.               
23. var myData = [  
24.     ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],  
25.     ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],  
26.     ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],  
27.     ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],  
28.     ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']  
29. ];  
30.           
31. 一个符合此格式的字符串也可以用作 data 配置项。   

很显然，JsonStore解析的是键值对，而ArrayStore解析的是数组。两者完全不同。

  官网的例子中，大多数在控件渲染时，JsonStore就自动加载从后台传过来的数据填充。而且在JsonStore里面获取数据出来给当前控件渲染时，是获取不出来的。如有以下的需求时：

Code:

1. var xxxCom=function(params,cfg){  //定义组件xxxCom
2.   xxxCom.apply(this,cfg);
3. var _mydata = null;
4. var _store = new Ext.data.JsonStore({  
5.             storeId : 'store_oaptcp',  
6.             autoDestroy: true,  
7.             autoLoad: true,   
8.             root:'data',  
9.             fields:['type', 'data1', 'data2','data3'],  
10.             proxy : new Ext.data.HttpProxy({  
11.                 method: 'POST',  
12.                 prettyUrls: false,  
13.                 url:xxx  
14.             }),  
15.             success : function(response, options) {  
16.                 var _res = Ext.util.JSON.decode(response.responseText);
    
17.                  _mydata = _res.otherdata;
18.             },  
19.             failure : function(response, options) {  
20.                 ZY.Utils.showMessage('链接错误', 'warning');  
21.             }  
22.            /*{  data: [ 
23.                 {name:'1', data1: 1000, data2: 1000,data3:0}, 
24.                 {name:'2', data1: 1200, data2: 1200,data3:0}, 
25.                 {name:'3', data1: 0, data2: 0,data3:0}, 
26.                 {name:'4', data1: 0, data2: 0,data3:0}, 
27.                 {name:'5', data1: 0, data2: 0,data3:0}, 
28.                 {name:'6', data1: 0, data2: 0,data3:0}, 
29.                 {name:'7', data1: 0, data2: 0,data3:0}, 
30.                 {name:'8', data1: 0, data2: 0,data3:0} 
31.             ],otherdata : data....}*/  
32.         });  
33.   xxxCom.superclass.constructor.call(this,
34.  {     title : _mydata,        //组件创建时，报null。
35.         store : _store,
36.          .... 
37.    });

1. }
2. Ext.exteng(xxxCom,Ext....);

        使用如下方法先获取数据，然后以参数的形式传入定义的组件中。

     Ext.Ajax.request({
            method: 'POST',
            url:xxx,
            success : function(response, options) {
                 var _res = Ext.util.JSON.decode(response.responseText);
                 var _new = new xxxCom({res : _res});
                //do other
             },
             failure : function(response, options) {
                //do other
            }
        });

 //组件里面的_store ,可用如下代替。

      var _res = params.res;

      var _store = new Ext.store.JsonStore({

       data : _res.data,

        fields: [...],

        storeId: ...

      });

   //同理通过_res 便可操作其他的数据。