[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)：