ExtJs的Reader

Reader?: 主要用于將proxy數據代理讀取的數據按照不同的規則進行解析,講解析好的數據保存到Modle中

結構圖

??? Ext.data.reader.Reader 讀取器的根類

?????? Ext.data.reader.Json?JSON格式的讀取器

?????????? Ext.data.reader.Array 擴展JSON的Array讀取器

?????? Ext.data.reader.Xml?XML格式的讀取器

Writer

結構圖

??? Ext.data.writer.Writer

?????? Ext.data.writer.Json?對象被解釋成JSON的形式傳到后臺

?????? Ext.data.writer.Xml??對象被解釋成XML的形式傳到后臺

1.???? Json的讀取器

?

[javascript]?view plain?copy

(function(){??

????Ext.onReady(function(){??

????????var?userData?=?{??

????????????//total?:?200,??

????????????count:250,??

????????????user:{??

????????????????userID:'1',??

????????????????name:'uspcat.com',??

????????????????orders:[??

????????????????????{id:'001',name:'pen'},??

????????????????????{id:'002',name:'book'}??

????????????????]??

????????????}??

????????};??

????????//定義model??

????????Ext.regModel("user",{??

????????????fields:[??

????????????????{name:'userID',type:'string'},??

????????????????{name:'name',type:'string'}??

????????????],??

????????????hasMany:?{model:?'order'}????//定義有多個order的屬性??

????????});??

????????Ext.regModel("order",{??

????????????fields:[??

????????????????{name:'id',type:'string'},??

????????????????{name:'name',type:'string'}??

????????????],??

????????????belongsTo:?{type:?'belongsTo',?model:?'user'}??//定義屬于??

????????});??

????????var?mproxy?=?Ext.create("Ext.data.proxy.Memory",{??

????????????model:'user',??

????????????data:userData,??

????????????reader:{??

????????????????type:'json',??

????????????????root:'user',??

????????????????implicitIncludes:true,????//級聯讀取??

????????????????totalProperty:'count'???????

????????????????//record?:'info'//服務器返回的數據可能很復雜,用record可以刪選出有用的數據信息,裝在帶Model中??

????????????}??

????????});??

????????mproxy.read(new?Ext.data.Operation(),function(result){??

????????????var?datas?=?result.resultSet.records;??

????????????alert(result.resultSet.total);????//打印count??

????????????Ext.Array.each(datas,function(model){??

????????????????alert(model.get('name'));??

????????????});??

????????????var?user?=?result.resultSet.records[0];???//獲取第一個用用數據??

????????????var?orders?=?user.orders();????//獲取到用戶中的orders集合??

????????????orders.each(function(order){???//遍歷orders集合??

????????????????alert(order.get('name'));??

????????????});??

?????????????

????????});??

????});??

})();??

2.???? Array讀取器

?

[javascript]?view plain?copy

?Ext.onReady(function(){??

????Ext.regModel("person",{??

???????fields:[??

???????????'name','age'??

//?????????{name:'name'},??

//?????????{name:'age'}??

???????],??

???????proxy?:{??

???????????type:'ajax',??

???????????url:'person.jsp',??

???????????reader:{??

??????????????type:'array'??

???????????}??

???????}??

????});??

???????var?person?=Ext.ModelManager.getModel('person');??

???????person.load(1,{??

???????????success:function(model){??

??????????????alert(model.get('name'));??

???????????}??

???????});??

});??

Person.jsp文件:

?<%

??? response.getWriter().write("[['yunfengcheng',26]]");

%>

3. XML格式的讀取器

?

[javascript]?view plain?copy

(function(){??

????Ext.onReady(function(){??

???????Ext.regModel("user",{??

???????????fields:[??

??????????????{name:'name'},??

??????????????{name:'id'}??

???????????],??

???????????proxy:{??

??????????????type:'ajax',??

??????????????url:'users.xml',??

??????????????reader:{??

??????????????????type:'xml',??

??????????????????record:'user'??

??????????????}??

???????????}??

???????});??

???????var?user?=?Ext.ModelManager.getModel('user');??

???????user.load(1,{??

???????????success:function(model){??

??????????????alert(model);??

??????????????alert(model.get('id'));??

???????????}??

???????});??

????});??

})();??

Users.xml文件:

?

[html]?view plain?copy

<users>??

????<user>??

???????<name>uspcat.com</name>??

???????<id>00101</id>??

????</user>??

</users>??

4.???? writer的Json和xml

?

[javascript]?view plain?copy

Ext.onReady(function(){??

????Ext.regModel("person",{??

???????fields:[??

???????????'name','age'??

???????],??

???????proxy?:{??

???????????type:'ajax',??

???????????url:'person.jsp',??

???????????writer:{??

??????????????type:'json'??//使用Json提交數據??

??????????????//type:'xml'?//使用xml提交數據??

???????????}??

???????}??

????});??

????Ext.ModelMgr.create({??

???????name:'uspcat.con',??

???????age:1??

????},'person').save();???

});??

使用Json寫入的時候，瀏覽器查看提交信息是如下圖，是以json提交的:

使用xml寫入的時候，瀏覽器查看提交信息是如下圖，是以xml提交的:

?

原文鏈接：https://blog.csdn.net/hanhan313/article/details/8159774

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的ExtJs的Reader的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。