ExtJs4入门之三: Proxy数据代理类

一: Ajax获取Json对象

Ext.onReady(function(){
	
	//声明一个模型类 , 相当于class
	Ext.define("Person",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'name',type:'atuo'},
		        {name:'age',type:'int'}
		 ],
		 //==>代理类的实例 
		 proxy:{
			 type:"ajax",
			 url:"fakeData.jsp"	 
			 //model不用配置 ,因为就生成在model内部	 
		 }

	});
	
	var p = Ext.ModelMgr.getModel( "Person" );//用ModelMgr获得相应Model目的是后边的load方法
	//==>用Model类的load()方法获取数据 (比较底层的方法)
	p.load( null , { //第一个参数默认是"{id:XX}"
		scope:this,
		failure:function(record , operation)//后边三个参数是回调函数 
		{
			alert(record);
		},
		success: function(record , operation)
		{
			alert(record.data.name + "__" + record.data.age);
		},
		callback:function(record , operation)
		{
		}
	});
	
});

同一文件夹下: fakeData.jsp

<%@ page language="java"  contentType="text/html" pageEncoding="UTF-8"%>
<%
	response.getWriter().write( "{name:'rt' , age:24}" );
%>

二:用Ext.data.proxy.Ajax对象实现ajax

Ext.onReady(function(){
	
	//模型类 , 相当于class
	Ext.define("person",{
		extend:"Ext.data.Model",
		fields:[
		        {name:'name',type:'string'},
		        {name:'age',type:'int'}
		 ]
	});
	
	//==>代理对象 , 用对象的 doRequest()方法获取数据
	var ajaxProxyObj = Ext.create("Ext.data.proxy.Ajax",{
		url : "fakeData.jsp",
		model : "person",
		reader : "json",
		limitParam : "indexParm" //参数未修改前默认叫"limit" , 通过这类描述可以修改字段名称
	});
	//拿到回应中的字串( 没decode解码), 和转成原生Js对象
	ajaxProxyObj.doRequest( new Ext.data.Operation({
					action:"read",//读方式
					//后台能拿到其余参数的json对象, 再做处理 最终再返回前台
					limit:3,//分页数据
					start:1,
					sorters:[ //排序数组 Ext.util.Sorter
					         {
					        	 property:"name",
					        	 direction:"ASC"
					         },{
					        	 property:"age",
					        	 direction:"ASC"
					         }
					 ]
					//还可以实现过滤器, 分组
			}) , function(obj){
					alert(obj);//chrome的F12调试工具 Sources , 右侧Scope Variables
					var txt = obj.response.responseText;////拿到回应中的字串( 没decode解码)
					alert( Ext.JSON.decode(txt)['name'] );//解码成一个对象(但是不是model,仅是原生Js对象)
	});
	
});

三: 用localstorage代理 , 代替cookies

Ext.onReady(function(){
	
	//模型类 , 相当于class
	Ext.define("person",{
		extend:"Ext.data.Model",
		
		fields:[
		        {name:'name',type:'string'},
		        {name:'age',type:'int'}
		 ],
		 //==>代理类 , 用Model类的load()方法获取数据
		 proxy:{
			 type:"localstorage"//,本地存储 , 目的是代替cookies不怕禁用cookies  .  
			//model: 配置可以省略, 因为就在本model之中
			
			//用 type:"ajax"的话需要配置 url:"fakeData.jsp"	
			// type:"sessionstorage"	 相当于session 关闭浏览器后会被删除
			 //id:"twitter-Searches"
		 }

	})
	
	//==>model的集合是store
	var store = Ext.create("Ext.data.Store",{
		model:person
	});
	//添加一条
	store.add({name:"store添加的", age:7 });
	//异步保存
	store.sync();
	//取出展示
	store.load();
	var msgArray = [];
	store.each( function(v){
		msgArray.push( v.get('name') + "__" + v.get('age'));
	});
	alert(msgArray.join("\n"));
	
	var p = Ext.ModelMgr.getModel( "person" );//传入名字
	p.load( null , {
		scope:this,
		failure:function(record , operation)
		{
			alert(record);
		},
		success: function(record , operation)
		{
			alert(record.data.name);
		},
		callback:function(record , operation)
		{
		}
		
	});
	
});