Ext学习Reader_Writer

首先概念要清楚：

Reader：主要用于将Proxy数据dialing读取的数据按照不同的规则进行解析， 将解析好的数据保存到Model中

结构图：Ext.data.reader.Reader  读取器的根类
                     Ext.data.reader.Json  JSON格式的读取
      Ext.data.reader.Xml  XM格式的读取器

Writer

机构图：Ext.data.writer.Writer
                      Ext.data.writer.Json   对象被解析成JSON的形式
      Ext.data.writer.Xml    对象被解析成XML形式传到后台

我们先看看API上面的图：

(function(){
	Ext.onReady(function(){
		 var userData={
			 //total:200,
			 
			 count:200,
			 user:[{auditor:'wangfangchen',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'} //name: 'products'}
		 });
		 
		 Ext.regModel("order",{
			 fields:[
				 {name:'id',type:'string'},
				 {name:'name',type:'string'}
				 ],
		    //   belogsTo:{type:'belongsTo',model:'user'}
		  associations: [
        { type: 'belongsTo', model: 'order' }
    ]
		 });
		 
		 var mproxy = Ext.create('Ext.data.proxy.Memory', {
			   // autoLoad: true,
			    model: 'user',
			    data : userData,
			    reader:{
			 type:'json',
			 root:'user',
			 implicitIncludes:true, //让关系级联
			 totalProperty:'count',
			 record:'info'   //服务器返回的数据可能很负载，用有用的数据信息装载到model中
			    }
			});
		 mproxy.read(new Ext.data.Operation(), function(result){
			 var datas=result.resultSet.records;
			// alert(result.resultSet.total);
			 alert(result.resultSet.total);
			 Ext.Array.each(datas,function(model){
				 alert(model.get('name'));
			 });
			 var user=result.resultSet.records[0];
			 var orders=user.orders();
			 orders.each(function(order){
				 alert(order.get('name'))
			 });
		 })
	}); 
})();

这个JSON类型的Reader应该：

1.简单用了JSON读取器，讲了下几个配置参数的用法
2.回顾一对多，多对一的数据模型建立方式
3.内存的代理装载数据，读取数据
4.提了一下Store关于each()的用法


Reader Writer 都是依托代理的实现的
Reader；是把负责的业务逻辑而翻译的一种格式通过很多配置参数来读到
Ext中转换成Model层


Writer：就是把现有的Model转换成Json和Xml传回到后台，然后再后台

下面我们看一看：数组形式的

(function(){
 Ext.onReady(function(){
	Ext.regModel("person",{
	   fields:[
		   'name','age'    //两种格式
		   //{name:'name'},
		   //{name:'age'}
		   ],
		   
		   //做一个代理
	    proxy:{
		    type:'ajax',
		    url:'person.jsp',
		    reader:{
		    type:'array'
		    }
		   }
    });
	
	var user=Ext.ModelManager.getModel('person');
		user.load(1,{
			success:function(model){
			alert(model.get('name'));
			}
	})
	})
})();

这个地方要注意一下：它的代理方式是

  reader:{
		    type:'array'
		    }

那么我们在后台传入的时候就需要用数组的形式传到前台了，看看person.jsp这个文件

<pre name="code" class="plain"><%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
response.getWriter().write("[['wangfangchen',26]]");
%>

这个是大家一定要理解清楚的。

</pre><pre name="code" class="javascript">

</pre><pre name="code" class="javascript">

下面看看XML格式的读取器：

<pre name="code" class="html">(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.get('name'));
			
			}
		})
	})
})();

type:'xml'，那对应的读取数据就是一个xml格式的，下面看看url：‘user.xml'

<pre name="code" class="html"><users>
    <user>
       <name>uspcat.com</name>
       <id>001212</id>
    </user>
</users>

</pre><pre name="code" class="javascript">最后看看writer写入器：xml和JSON

其实这两种格式都差不多，只要改一下格式就OK。

<pre name="code" class="html">//所谓写Write（实际上就是返回到后台取，前台数据返回到后台取）
(function(){
Ext.onReady(function(){
	Ext.regModel("person",{
	   fields:[
		   'name','age'    //两种格式
		   //{name:'name'},
		   //{name:'age'}
		   ],
		   
		   //做一个代理
	    proxy:{
		    type:'ajax',
		    url:'person.jsp',
		    writer:{
		       type:'json'
		    }
		   }
    });
	
	Ext.ModelMgr.create({
		name:'uspact.con',
		age:1 
	},'person').save();
})
})();

url:'person.jsp'，这个jsp是用来获取这个.js传递过来的数据，是json格式或者xml格式，然后处理相应的业务逻辑。

</pre><pre name="code" class="javascript">这个type:'json’传递过去的格式就是JSON格式，是‘xml'那么传递过去的就是xml格式。

</pre><pre name="code" class="javascript">看下面调试的图大家就清晰了：

<img src="https://img-blog.youkuaiyun.com/20140906160146703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSXRKYXZhd2Zj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<img src="https://img-blog.youkuaiyun.com/20140906160409122?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSXRKYXZhd2Zj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />