Extjs学习笔记(五) 数据读写器

最新推荐文章于 2025-11-25 11:17:27 发布

最新推荐文章于 2025-11-25 11:17:27 发布 · 155 阅读

文章标签：

#json #java

Exjs学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了在Ext.js框架中如何使用不同类型的读取器（如JSON、Array、XML）从数据源获取数据，并通过JSON、XML写入器将数据以特定格式发送至后台。同时，通过示例展示了如何注册模型、配置代理和操作数据集。

结构:

Modle中
结构图
   Ext.data.reader.Reader 读取器的根类
       Ext.data.reader.Json JSON格式的读取器
           Ext.data.reader.Array 扩展JSON的Array读取器
       Ext.data.reader.Xml XML格式的读取器

@Ext.data.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'}
		});
		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',             //具体的数据，data（抛出count等描述信息）
				implicitIncludes:true,      //是否级联
				totalProperty:'count',   //改变读取 描述总数的字段名，如total->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];
			//一个Store
			var orders = user.orders();
			orders.each(function(order){
				alert(order.get('name'))
			});
			
		})
	});
})();

@Ext.data.reader.Array

person.jsp

<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
<%
	response.getWriter().write("[['yunfengcheng',26]]");
%>

js:

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'))
			}
		})
});

@Ext.data.reader.Xml

users.xml

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

js:

(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'))
			}
		})
	});
})();

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

@Ext.data.writer.Json

以POST方式向后台写入数据

Ext.onReady(function(){
	Ext.regModel("person",{
		fields:[
			'name','age'
		],
		proxy :{
			type:'ajax',
			url:'person.jsp',
			writer:{
				//type:'json'
				type:'xml'
			}
		}
	});
	Ext.ModelMgr.create({  //等于Ext.ModelMgr.create
		name:'uspcat.con',
		age:1
	},'person').save();
		
})