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

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

Code:

一个store配置项看起来如下:

var store = new Ext.data.JsonStore({

// store configs

autoDestroy: true,

url: 'get-images.php',

storeId: 'myStore',

// reader configs

root: 'images',

idProperty: 'name',

fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]

});





此store被配置用来解析如下的格式的对象:



{

images: [

{name: 'Image one', url:'/GetImage.php?id=1', size:46.5, lastmod: new Date(2007, 10, 29)},

{name: 'Image Two', url:'/GetImage.php?id=2', size:43.2, lastmod: new Date(2007, 10, 30)}

]

}



一个符合此格式的字符串也可以用作 data 配置项。

Code:

Store的配置就像如下代码所示:





var store = new Ext.data.ArrayStore({

// store configs

autoDestroy: true,

storeId: 'myStore',

// reader configs

idIndex: 0,

fields: [

'company',

{name: 'price', type: 'float'},

{name: 'change', type: 'float'},

{name: 'pctChange', type: 'float'},

{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}

]

});





此Store被配置用来解析如下格式的对象:





var myData = [

['3m Co',71.72,0.02,0.03,'9/1 12:00am'],

['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],

['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],

['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],

['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']

];



一个符合此格式的字符串也可以用作 data 配置项。

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

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

Code:

var xxxCom=function(params,cfg){ //定义组件xxxCom

xxxCom.apply(this,cfg);

var _mydata = null;

var _store = new Ext.data.JsonStore({

storeId : 'store_oaptcp',

autoDestroy: true,

autoLoad: true,

root:'data',

fields:['type', 'data1', 'data2','data3'],

proxy : new Ext.data.HttpProxy({

method: 'POST',

prettyUrls: false,

url:xxx

}),

success : function(response, options) {

var _res = Ext.util.JSON.decode(response.responseText);



_mydata = _res.otherdata;

},

failure : function(response, options) {

ZY.Utils.showMessage('链接错误', 'warning');

}

/*{ data: [

{name:'1', data1: 1000, data2: 1000,data3:0},

{name:'2', data1: 1200, data2: 1200,data3:0},

{name:'3', data1: 0, data2: 0,data3:0},

{name:'4', data1: 0, data2: 0,data3:0},

{name:'5', data1: 0, data2: 0,data3:0},

{name:'6', data1: 0, data2: 0,data3:0},

{name:'7', data1: 0, data2: 0,data3:0},

{name:'8', data1: 0, data2: 0,data3:0}

],otherdata : data....}*/

});

xxxCom.superclass.constructor.call(this,

{ title : _mydata, //组件创建时，报null。

store : _store,

....

});

}

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 便可操作其他的数据。