http://blog.csdn.net/without0815/article/details/7798170

1.什么是store？

Store類似于一個(gè)本地倉(cāng)庫(kù)(即數(shù)據(jù)存儲(chǔ)器),包括有?ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子類)

最終主要用于提供給panel去顯示.

Store由Proxy(數(shù)據(jù)源)和DataReader(解讀數(shù)據(jù))組成。

一.(Proxy)數(shù)據(jù)源：一般是后臺(tái)的值，習(xí)慣性的把它轉(zhuǎn)換成json對(duì)象給store(注：個(gè)人理解)

二.(DataReader)讀取數(shù)據(jù)：獲得了數(shù)據(jù)后需要解析數(shù)據(jù)，DataReader(fields屬性其實(shí)是Record對(duì)象的)解析數(shù)據(jù)并指定格式.

三.store存儲(chǔ)好的數(shù)據(jù)最后交給panel

2.store中重要的屬性和方法

屬性：data、proxy、reader、url、root ....

方法：load

1、如果配置了data，則proxy和url無(wú)效，且不需要調(diào)用load方法來(lái)生成Record集合

1 var store=newExt.data.ArrayStore({2 fields: ['DEPTNO', 'DNAME', 'LOC'],3 data:Ext.datas.mess //引用data.js 數(shù)據(jù)

4 });

2、如果沒(méi)有配置data,則必須設(shè)置proxy或url,或兩者都設(shè)置。此時(shí)，如果沒(méi)有將autoLoad設(shè)置為true，

那么需要手動(dòng)進(jìn)行l(wèi)oad方法的調(diào)用。就是為了得到數(shù)組、Json或Xml等格式的數(shù)據(jù)。

例子：讀取Json格式的數(shù)據(jù)

1 Ext.define("ExtApp.store.StudentList",{2 extend:"Ext.data.Store",3 model:"ExtApp.model.UserinfoM",4 autoLoad:{start:0,limit:3}, //分頁(yè)要用的

5 pageSize:3,6 proxy:{7 type:"ajax",8 url : 'queryStudents.action',9 reader:{10 type:"json",11 root:"rows",12 totalProperty:"results"

13 }14 }15 });

http://www.cnblogs.com/hdchild/archive/2009/11/17/1605011.html

3.store中讀取數(shù)據(jù)的幾種方式

ArrayReader ? ? ? ?JsonReader ? ? ? ? ? XmlReader

ArrayReader :這是數(shù)組類型的數(shù)據(jù)，數(shù)據(jù)形式如下：

[ [1, '測(cè)試', '小王',3], [2, '新年好', 'williamraym',13] ]

我們要定義這樣的數(shù)據(jù)類型

var MyRecord = Ext.data.Record.create([

{name: 'title', mapping:1}, //對(duì)應(yīng)'測(cè)試'

{name: 'username', mapping:2},//對(duì)應(yīng)'小王'

{name: 'loginTimes', type:3}//對(duì)應(yīng)'3'

]);

這里的mapping即對(duì)應(yīng)的數(shù)組中的下標(biāo)，當(dāng)然數(shù)組的下表是從0開(kāi)始的。

數(shù)據(jù)類型定義好了，就要讀取數(shù)據(jù)：

var myReader = new Ext.data.ArrayReader({

id: 0

}, MyRecord);

注意，這里的id:0說(shuō)明真實(shí)數(shù)據(jù)第0列是對(duì)應(yīng)id。第一列對(duì)應(yīng)我們定義的類型中的title,以此類推。

JsonReader：

JSON數(shù)據(jù)：這是后臺(tái)返回的數(shù)據(jù)：

{ 'results': 2, 'rows': [

{ id: 1, title: '測(cè)試', author: '小王', loginTimes: 3 },

{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]

}

我們要定義自己的數(shù)據(jù)類型：

model層：

var MyRecord = Ext.data.Record.create([

{name: 'title'},

{name: 'username', mapping: 'author'},//mapping的作用：用于和返回的json數(shù)據(jù)對(duì)應(yīng)上，mapping 與 后臺(tái) action中的類屬性相對(duì)應(yīng)

{name: 'loginTimes', type: 'int'}

]);

Store層寫：

1 Ext.define("ExtApp.store.StudentList",{

2 extend:"Ext.data.Store",

3 model:"ExtApp.model.UserinfoM",

4 autoLoad:{start:0,limit:3}, // 分頁(yè)要用的

5 pageSize:3,

6 proxy:{

7 type:"ajax",

8 url : 'queryStudents.action',

9 reader:{

10 type:"json",

11 root:"rows",

12 totalProperty:"results"

13 }

14 }

15 });

Extjs里面Mapping是什么意思？

這里看出來(lái)了吧，name屬性對(duì)應(yīng)的是我們自己的數(shù)據(jù)列的名字，mapping對(duì)應(yīng)的是真實(shí)數(shù)據(jù)的數(shù)據(jù)列名，如果兩者相同，mapping可以省略。

XmlReader

這個(gè)和JSON很相似，基本一樣

先看下原始數(shù)據(jù)：

2

1

測(cè)試 title >

小王 author >

3 loginTimes >

2

新年好 title >

williamraym author >

13 loginTimes >

我們定義自己的數(shù)據(jù)類型：

var MyRecord = Ext.data.Record.create([

{name: 'title'},

{name: 'username', mapping: 'author'},

{name: 'loginTimes', type: 'int'}

]);

然后是讀取數(shù)據(jù)：

var myReader = new Ext.data.XmlReader({

totalRecords: "results",

record: "rows",

id: "id"

}, MyRecord);

這里也是一一對(duì)應(yīng)的關(guān)系。

以上是自己的一些看法，也從網(wǎng)上摘抄了些，有不對(duì)的地方希望大家指出來(lái)，一起學(xué)習(xí)。

3.Extjs中Store中定義的root和totalProperty什么意思？參考：http://blog.csdn.net/21aspnet/article/details/6867458

JsonReader支持分頁(yè)，與JSON數(shù)據(jù)對(duì)應(yīng)格式如下：

totalProperty:　? json數(shù)據(jù)中，保存總記錄數(shù)的屬性

successProperty: json數(shù)據(jù)中，保存是否返回成功的屬性名

root:　　　　　　　json數(shù)據(jù)中，保存記錄集的屬性的屬性名

id:　　?????????? json數(shù)據(jù)中，記錄中主鍵所對(duì)應(yīng)的列的屬性名

例如：后臺(tái)返回給前臺(tái)的JSON數(shù)據(jù)如下面的代碼所示:

//JSON數(shù)據(jù)

var?json = {?'results': 2,

'rows': [{?'id': 1,?'name':?'Bill', occupation:?'Gardener'?},

{?'id': 2,?'name':?'Ben', occupation:?'Horticulturalist'?}

]

};

在JsonReader中設(shè)置為如下代碼：

//JsonReader

var reader = new Ext.data.JsonReader(

{

totalProperty: "results",? //totalRecords屬性由json.results得到

successProperty: true,??? //json數(shù)據(jù)中，保存是否返回成功的屬性名

root: "rows",??????????? //構(gòu)造元數(shù)據(jù)的數(shù)組由json.rows得到

id: "id"??????????????? //id由json.id得到

}, [

{ name: 'name', mapping: 'name' },

{ name: 'occupation'}??????????? //如果name與mapping同名,可以省略mapping

]

);

jsonreader從proxy中讀取的數(shù)據(jù)需要進(jìn)行解析，這些數(shù)據(jù)轉(zhuǎn)換成Record數(shù)組后才能提供給Ext.data.Store使用。

在JavaScript中，JSON是一種非常重要的數(shù)據(jù)格式，key:value的形式比XML那種復(fù)雜的標(biāo)簽結(jié)構(gòu)更容易理解，代碼量也更小，很多人傾向于使用它作為EXT的數(shù)據(jù)交換格式。為JsonReader準(zhǔn)備的JSON數(shù)據(jù)如下面的代碼所示:

vardata = {

id:0,

totalProperty:2,

successProperty:true,

root:[

{id:'id1',name:'name1',descn:'descn1'},

{id:'id2',name:'name2',descn:'descn2'}

]

};

與數(shù)組相比，JSON的最大優(yōu)點(diǎn)就是支持分頁(yè)，我們可以使用totalProperty參數(shù)表示數(shù)據(jù)的總量。successProperty參數(shù)是可選的，可以用它判斷當(dāng)前請(qǐng)求是否執(zhí)行成功，進(jìn)而判斷是否進(jìn)行數(shù)據(jù)加載。在不希望JsonReader處理響應(yīng)數(shù)據(jù)時(shí)，可以把successProperty設(shè)置成false。

現(xiàn)在來(lái)討論一下JsonReader，看看它是如何與上面的JSON數(shù)據(jù)對(duì)應(yīng)的，如下面的代碼所示。

varreader =?newExt.data.JsonReader({

successProperty:?"successproperty",

totalProperty:?"totalProperty",

root:?"root",

id:?"id"

}, [

{name:'id',mapping:'id'},

{name:'name',mapping:'name'},

{name:'descn',mapping:'descn'}

]);

因?yàn)閚ame和mapping部分的內(nèi)容是相同的，其實(shí)這里的mapping可以省略，默認(rèn)會(huì)用name參數(shù)從JSON中獲得對(duì)應(yīng)的數(shù)據(jù)。如果不想與JSON里的名字一樣，也可以使用mapping修改。

總結(jié)

以上是生活随笔為你收集整理的extjs中元数据_Extjs中Store小总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。