日期:2014-05-16  浏览次数:20395 次

extjs 初学笔记 (四) reader
//json reader 主要用来出来比较复杂的json 数据结构
(function(){
	Ext.onReady(function(){
	   //复杂数据对象 
		var userData = {
			//total : 200,
			count:250,
			user:[{auditor:'yunfengcheng',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'} //一对多关系
		});
		//商品model
		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, //级联关系 设置为true
				totalProperty:'count', //指定替代 total 字段的字段名
				record : 'info'//服务器返回的数据可能很复杂,用record可以筛选出有用的数据信息
			}
		});
		//读取数据
		mproxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			alert(result.resultSet.total);
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			});
			//读取出来的数据是一个stroe类型
			var user = result.resultSet.records[0];
			var orders = user.orders();
			orders.each(function(order){
				alert(order.get('name'))
			});
			
		})
	});
})();



?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的形式传到后台

//读取数组格式的数据
Ext.onReady(function(){
	Ext.regModel("person",{
		fields:[
			'name','age'
//			{name:'name'},
//			{name:'age'}
		],
		proxy :{
			type:'ajax',
			url:'person.jsp',// 此处的数据是 [['yunfengcheng',26]]
			reader:{
				type:'array'
			}
		}
	});
		var person = Ext.ModelManager.getModel('person');
		person.load(1,{
			success:function(model){
				alert(model.get('name'))
			}
		})
});

?

//读取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>
	<user>
		<name>uspcat.com</name>
		<id>00101</id>
	</user>
</users>

?

//向服务器端发送xml格式数据
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.con',
		age:1
	},'person').save();
		
})

?