[05]EXTJS4.0的讀寫器reader,writer

Reader:主要用於將proxy數據代理讀取的數據按照不同的規則進行解析，將解析好的數據保持到Model(數據模型類)中

結構圖 

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

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

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

        Ext.data.reade.Xml  XML格式的讀取器

Writer

結構圖：

      Ext.data.writer.Writer

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

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

--------------------------------------------------------------------------------------

這個例子主要講：模型中的關係(hasMany,belongsTo),reader(type,root,implicitIncludes,totalProperty,record)

readerJson.js

(function(){
  Ext.onReady(function(){
    var userData = {
            //total:200,
            count:250,
            user:[{auditor:'ynfengcheng',info:{
                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'}
    });
    Ext.regModel("order",{
        fields:[
            {name:'id',type:'string'},
            {name:'name',type:'string'}
        ],
        belongsTo:{type:'belongTo',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;
        console.log(result.resultSet);
        console.log(result.resultSet.total);
        Ext.Array.each(datas,function(model){
               console.log(model.get("name"));
        });
        var user = result.resultSet.records[0];
        var orders = user.orders();
        orders.each(function(order){
            console.log(order.get('name'));
        })
    });

  });
})();

運行結果：

 

constructor {total: 250, count: 1, records: Array[1], success: true, message: undefined…}

250

uspcat.com

pen

book

 

-------------------------------------------------------------------------------------

這個例子主要講reader(xml)

readerxml.js

(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){
             console.log(model);
             console.log(model.get('name'));
        }
     });
  });
})();

users.xml

<users>
   <user>
        <name>uspcat.com</name>
        <id>00100</id>
   </user>
</users>

運行結果：

 

constructor {internalId: "00100", raw: <user>, data: Object, modified: Object, hasListeners: HasListeners…}

uspcat.com

-----------------------------------------------------------------------------

這個例子主要講reader(array),Ext.ModelManager.getModel(load)

readerarray.js

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){
        console.log(model);
        console.log(model.get('name'));
     }
   });
});

person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
   response.getWriter().write("[['yengpingfeng','26']]");
%>

運行結果：

 

constructor {phantom: false, internalId: "ext-record-1", raw: Array[2], data: Object, modified: Object…}

yengpingfeng 

---------------------------------------------------------------------------------

這個例子主要講writer(xml,json)

writer.js

Ext.onReady(function(){
    Ext.regModel("person",{
      fields:[
        'name','age'
      ],
       proxy:{
         type:'ajax',
         url:'person.jsp',
         writer:{
             //type:'json'
              type:'xml'
         }
       }
    });

    Ext.ModelMgr.create({
       name:'uspcat.com',
       age:1
    },'person').save();

});

運行結果（xml）：

運行結果(xml)：