ExtJS学习03-优快云博客

本文链接：https://blog.youkuaiyun.com/ItJavawfc/article/details/29631485

本文详细介绍了Ext.js框架中数据读写器（Reader）与写入器（Writer）的功能，包括如何使用JSON、XML格式进行数据操作，以及如何通过模型管理数据。通过实例展示了如何创建和配置Reader和Writer，以及如何使用模型和代理来存储和检索数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.data.reader.Json 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,
				totalProperty:'count',
				record : 'info'//服务器返回的数据可能很负载,用record可以删选出有用的数据信息,装在带Model中
			}
		});
		
		//读出来
		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'));
			});
			var user = result.resultSet.records[0];
			var orders = user.orders();     //返回的是一个数据集
			orders.each(function(order){
				alert(order.get('name'))
			});
			
		})
	});
})();

Ext.data.reader.Array 扩展JSON的Array读取器

(function(){
	 Ext.regModel("person",{        //模型
		 fields:[
		         'name','age'
//		         {name:'name'},
//		         {name:'age'}
		         ],
		         
		         proxy:{       //代理
		        	 type:'ajax',
		        	 url:'person.jsp',
		        		 reader:{         //读取器
		        			 type:'array'
		        		 }
		         }
	 });
	//得到Model
	var person= Ext.ModelManager.getModel('person');
	//展现数据
	 person.load(1,{
			success:function(model){
				alert(model.get('name'))
			}
		})
	
})();

Ext.data.reader.Xml XML格式的读取器

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{             //创建模型
			fields:[
			        {name:'name'},
			        {name:'id'}
			        ],
			        proxy:{              //创建代理
			        	type:'ajax',
			        	url:'users.xml',
			        	reader:{           //创建读取器
			        		type:'xml',
			        		record:'user'
			        	}
			        }
		});
		
		//得到Model
		var user= Ext.ModelManager.getModel('user');
		user.load(1,{
			success:function(model){
				alert(model.get('name'))
			}
		})
	});
})();

<strong>users.xml</strong>

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

Ext.data.writer.Json 对象被解释成JSON的形式传到后台

(function(){
	 Ext.regModel("person",{        //模型
		 fields:[
		         'name','age'
 
		         ],
		         
		         proxy:{       //代理
		        	 type:'ajax',
		        	 url:'person.jsp',
//		        		 reader:{         //读取器
//		        			 type:'array'
//		        		 },
		        		 writer:{        //准备往后台数据里面存
		        			 type:'json'
		        			// type:'xml'
		        		 }
		         }
	 });
	 
	 Ext.ModelMgr.create({
		 name:'uspcat.com',
		 age:'2'
		 
	 },'person').save();
})();

得到的结果：

Ext.data.writer.Xml 对象被解释成XML的形式传到后台

(function(){
	 Ext.regModel("person",{        //模型
		 fields:[
		         'name','age'
 
		         ],
		         
		         proxy:{       //代理
		        	 type:'ajax',
		        	 url:'person.jsp',
//		        		 reader:{         //读取器
//		        			 type:'array'
//		        		 },
		        		 writer:{        //准备往后台数据里面存
		        			 //type:'json'
		        			type:'xml'
		        		 }
		         }
	 });
	 
	 Ext.ModelMgr.create({
		 name:'uspcat.com',
		 age:'2'
		 
	 },'person').save();
})();