ExtJs的Reader

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的读取器

 

(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读取器

 

 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格式的读取器

 

(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文件:

 

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

4.     writer的Json和xml

 

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