extjs中元数据_Extjs中Store小总结
http://blog.csdn.net/without0815/article/details/7798170
1.什么是store？
Store類似于一個本地倉庫(即數據存儲器),包括有?ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子類)
最終主要用于提供給panel去顯示.
Store由Proxy(數據源)和DataReader(解讀數據)組成。
一.(Proxy)數據源：一般是后臺的值，習慣性的把它轉換成json對象給store(注：個人理解)
二.(DataReader)讀取數據：獲得了數據后需要解析數據，DataReader(fields屬性其實是Record對象的)解析數據并指定格式.
三.store存儲好的數據最后交給panel
2.store中重要的屬性和方法
屬性：data、proxy、reader、url、root ....
方法：load
1、如果配置了data，則proxy和url無效，且不需要調用load方法來生成Record集合
1 var store=newExt.data.ArrayStore({2 fields: ['DEPTNO', 'DNAME', 'LOC'],3 data:Ext.datas.mess //引用data.js 數據
4 });
2、如果沒有配置data,則必須設置proxy或url,或兩者都設置。此時，如果沒有將autoLoad設置為true，
那么需要手動進行load方法的調用。就是為了得到數組、Json或Xml等格式的數據。
例子：讀取Json格式的數據
1 Ext.define("ExtApp.store.StudentList",{2 extend:"Ext.data.Store",3 model:"ExtApp.model.UserinfoM",4 autoLoad:{start:0,limit:3}, //分頁要用的
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中讀取數據的幾種方式
ArrayReader ? ? ? ?JsonReader ? ? ? ? ? XmlReader
ArrayReader :這是數組類型的數據，數據形式如下：
[ [1, '測試', '小王',3], [2, '新年好', 'williamraym',13] ]
我們要定義這樣的數據類型
var MyRecord = Ext.data.Record.create([
{name: 'title', mapping:1}, //對應'測試'
{name: 'username', mapping:2},//對應'小王'
{name: 'loginTimes', type:3}//對應'3'
]);
這里的mapping即對應的數組中的下標，當然數組的下表是從0開始的。
數據類型定義好了，就要讀取數據：
var myReader = new Ext.data.ArrayReader({
id: 0
}, MyRecord);
注意，這里的id:0說明真實數據第0列是對應id。第一列對應我們定義的類型中的title,以此類推。
JsonReader：
JSON數據：這是后臺返回的數據：
{ 'results': 2, 'rows': [
{ id: 1, title: '測試', author: '小王', loginTimes: 3 },
{ id: 2, title: 'Ben', author: 'williamraym', loginTimes:13} ]
}
我們要定義自己的數據類型：
model層：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},//mapping的作用：用于和返回的json數據對應上，mapping 與 后臺 action中的類屬性相對應
{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}, // 分頁要用的
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是什么意思？
這里看出來了吧，name屬性對應的是我們自己的數據列的名字，mapping對應的是真實數據的數據列名，如果兩者相同，mapping可以省略。
XmlReader
這個和JSON很相似，基本一樣
先看下原始數據：
2
1
測試 title >小王 author >
3 loginTimes >
2
新年好 title >williamraym author >
13 loginTimes >
我們定義自己的數據類型：
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'}
]);
然后是讀取數據：
var myReader = new Ext.data.XmlReader({
totalRecords: "results",
record: "rows",
id: "id"
}, MyRecord);
這里也是一一對應的關系。
以上是自己的一些看法，也從網上摘抄了些，有不對的地方希望大家指出來，一起學習。
3.Extjs中Store中定義的root和totalProperty什么意思？參考：http://blog.csdn.net/21aspnet/article/details/6867458
JsonReader支持分頁，與JSON數據對應格式如下：
totalProperty: ? json數據中，保存總記錄數的屬性
successProperty: json數據中，保存是否返回成功的屬性名
root: json數據中，保存記錄集的屬性的屬性名
id: ?????????? json數據中，記錄中主鍵所對應的列的屬性名
例如：后臺返回給前臺的JSON數據如下面的代碼所示:
//JSON數據
var?json = {?'results': 2,
'rows': [{?'id': 1,?'name':?'Bill', occupation:?'Gardener'?},
{?'id': 2,?'name':?'Ben', occupation:?'Horticulturalist'?}
]
};
在JsonReader中設置為如下代碼：
//JsonReader
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",? //totalRecords屬性由json.results得到
successProperty: true,??? //json數據中，保存是否返回成功的屬性名
root: "rows",??????????? //構造元數據的數組由json.rows得到
id: "id"??????????????? //id由json.id得到
}, [
{ name: 'name', mapping: 'name' },
{ name: 'occupation'}??????????? //如果name與mapping同名,可以省略mapping
]
);
jsonreader從proxy中讀取的數據需要進行解析，這些數據轉換成Record數組后才能提供給Ext.data.Store使用。
在JavaScript中，JSON是一種非常重要的數據格式，key:value的形式比XML那種復雜的標簽結構更容易理解，代碼量也更小，很多人傾向于使用它作為EXT的數據交換格式。為JsonReader準備的JSON數據如下面的代碼所示:
vardata = {
id:0,
totalProperty:2,
successProperty:true,
root:[
{id:'id1',name:'name1',descn:'descn1'},
{id:'id2',name:'name2',descn:'descn2'}
]
};
與數組相比，JSON的最大優點就是支持分頁，我們可以使用totalProperty參數表示數據的總量。successProperty參數是可選的，可以用它判斷當前請求是否執行成功，進而判斷是否進行數據加載。在不希望JsonReader處理響應數據時，可以把successProperty設置成false。
現在來討論一下JsonReader，看看它是如何與上面的JSON數據對應的，如下面的代碼所示。
varreader =?newExt.data.JsonReader({
successProperty:?"successproperty",
totalProperty:?"totalProperty",
root:?"root",
id:?"id"
}, [
{name:'id',mapping:'id'},
{name:'name',mapping:'name'},
{name:'descn',mapping:'descn'}
]);
因為name和mapping部分的內容是相同的，其實這里的mapping可以省略，默認會用name參數從JSON中獲得對應的數據。如果不想與JSON里的名字一樣，也可以使用mapping修改。
總結
以上是生活随笔為你收集整理的extjs中元数据_Extjs中Store小总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vba中循环语句
- 下一篇： mybatis TypeHandler