首先概念要清楚:
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.csdn.net/20140906160146703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSXRKYXZhd2Zj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
<img src="https://img-blog.csdn.net/20140906160409122?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSXRKYXZhd2Zj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />