extjs4.0的数据代理proxy及数据模型的使用（转）

数据代理proxy

数据代理proxy是进行数据读写的一个主要途径，通过代理操作进行CURD

每一步操作全会得到唯一的Ext.data.Operation实例化包含了所有的请求参数

1.       数据代理proxy目录结构

Ext.data.proxy.Proxy代理类的根类划分为客户端（Client）代理和服务器(Server)代理

         Ext.data.proxy.Client  客户端代理

                   Ext.data.proxy.Memory  普通的内存代理 

                   Ext.data.proxy.WebStorage  浏览器客户端存储代理

                            Ext.data.proxy.SessionStorage  浏览器级别代理

                            Ext.data.proxy.LocalStorage   本地化的级别代理（不能跨浏览器的）

Ext.data.proxy.Server  服务器端代理

          Ext.data.proxy.Ajax 异步加载的方式

                   Ext.data.proxy.Rest 一种特定的Ajax

          Ext.data.proxy.JsonP  跨域交互的代理

                                     跨域的缺点：跨域是有严重性安全隐患的extjs的，跨域也是需要服务器端做相应的配合

         Ext.data.proxy.Direct命令

客户端的代理

1．Ext.data.proxy.Memory  普通的内存代理的使用

(function(){

    Ext.onReady(function(){

       //内存代理的创建

       Ext.regModel("user",{

           fields:[

              {name:'name',type:'string'},

              {name:'age',type:'int'}

           ]

       });

       //使用内存代理来为类赋值和实例化

       var memory = [

           {name:'laowang',age:23},

           {name:'laoyao',age:22}

       ]

       //利用Ext.data.proxy.Memory  即使内存代理来把类和值连接起来

       var memoryProxy = Ext.create("Ext.data.proxy.Memory",{

           data:memory,//注意数组不带''

           model:'user'

       });

      

       //通过使用proxy实现CURD

       //其次是更新,用update,把更新放到查找之前可以在更新之后直接读取出来

       memory.push({name:'new laowang',age:26})

      

       memoryProxy.update(new Ext.data.Operation({

           action:'update',

           data:memory

       }),function(result){},this)

 

       //首先实现的是查找，通过断点来知道result可以得到一个数组

       memoryProxy.read(new Ext.data.Operation(),function(result){

           var pdata = result.resultSet.records;

           //注意数组不带''，数组的遍历用each方法

           Ext.Array.each(pdata,function(model){

              alert(model.get('name'));

           });

       },this);

    });

})();

2. Ext.data.proxy.LocalStorage  本地化的级别代理（不能跨浏览器的）

1.(function(){

2.  Ext.onReady(function(){

3.  //学习Ext.data.proxy.LocalStorage，即是本地化的级别代理，是不夸浏览器的，相当于是cookie

4.  Ext.regModel("user",{

5.      fields:[

6.          {name:'name',type:'string'}

7.      ],

8.      //指定代理的类型为本地的代理级别，id是唯一的标识

9.      proxy:{

10.        type:'localstorage',

11.        id:'twitter-Searches' //id不可以省去，因为每访问一次就有一个cookie在本地，是通过uuid来标识的

12.    }

13. });

14. // 我们用store来初始化数据

15. var store = new Ext.data.Store({

16.    model:user

17. });

18. //利用store中的方法来添加数据，store是数据集

19. store.add({name:'laowang'});

20. store.sync();//用来保存添加的数据

21. store.load();//读取存在store中的数据

22.

23. //把数据集通过数组的形式读取出来

24. var msg = [];

25. store.each(function(rec){

26.    msg.push(rec.get('name'));

27.    //alert(rec.get('name'));这样写看不出来有多少个，还要数

28. });

29. alert(msg.join('\n'));//因为是一个数据集，所以在每次访问之后都会想store中加入一个name，所以each会再多一次循环

30. });

31.   })();

3. Ext.data.proxy.SessionStorage  浏览器级别代理

和本地级别的代理不同的是porxy代理不同，其他的都相同

(function(){

    Ext.onReady(function(){

    //学习Ext.data.proxy.SessionStorage,即是浏览器级别的代理，只限于一次会话

    Ext.regModel("user",{

       fields:[

           {name:'name',type:'string'}

       ],

       //指定代理的类型为本地的代理级别，id是唯一的标识

       proxy:{

            type:'sessionstorage',

            id:'myProxyKey' 

        }

    });

    // 我们用store来初始化数据

    var store = new Ext.data.Store({

       model:user

    });

    //利用store中的方法来添加数据，store是数据集

    store.add({name:'laowang'});

    store.sync();//用来保存添加的数据

    store.load();//读取存在store中的数据

   

    //把数据集通过数组的形式读取出来

    var msg = [];

    store.each(function(rec){

       msg.push(rec.get('name'));

       //alert(rec.get('name'));这样写看不出来有多少个，还要数

    });

   

    alert(msg.join('\n')+"一次访问为："+msg.length+"次"); 

    });

})();

以上的本地代理和浏览器代理的用处:

    本地代理可以用于永久的存储，如果只是一次会话就用session代理，比如打开用电脑的时候用的是家庭式的还是网吧式的，如果是网吧式的，在后台编写的时候就可以用的是session代理，只记录当时的情况。

乱码问题没有解决啊！

 

服务端的代理

1．Ext.data.proxy.Ajax 异步加载的方式

(function(){

    Ext.onReady(function(){

       Ext.regModel("person",{

           fileds:[

              {name:'name',type:'string'}

           ],

       });

       //利用ajax代理来和jsp页面连接,不用上次我们用到的在proxy中嵌套，把ajax和类的模型提取出来来创建

       //里面为ajax的属性

       var ajaxProxy = new Ext.data.proxy.Ajax({

           model:'person',

           url:'extLession/proxy04/person.jsp',

           reader:'json'

       });

       //读取jsp页面的数据

       ajaxProxy.doRequest(new Ext.data.Operation(),function(o){

           var text = o.response.responseText;//得到的是name的值，但是我们要的是一个类的model，所以再通过属性转化一下。

           alert(Ext.JSON.decode(text)['name']);

       });

    });

})();

2．Ext.data.proxy.JsonP  跨域交互的代理

从本地可以跨域到其他的网站上去

(function(){

    Ext.onReady(function(){

       //Ext.data.proxy.JsonP  跨域交互的代理

       Ext.regModel("person",{

           fileds:[

              {name:'name',type:'string'}

           ],

           //跨域的代理

           proxy:{

              type:'jsonp',

              url:'http://www.baidu/extjs.com'

           }

       });

       //初始化类

       var person = Ext.ModelManager.getModel("person");

       person.load(1,{

           scope:this,

           success:function(model){

              alert(model.get('name'));

           }

       });

    });

})();

 

 

1、创建Ext.data.Model数据实体模型

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'phone', type: 'string'}
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    phone: '555-555-5555'
}, 'User');
//获取员工姓名
alert(user.get('name'));

2、在模型中进行数据验证

//定义默认的验证提示信息
Ext.data.validations.presenceMessage = '必须是有效值。';
Ext.data.validations.lengthMessage = '长度错误。';
Ext.data.validations.formatMessage = '格式错误。';
Ext.data.validations.inclusionMessage = '没有包括在可接受的数据中。';
Ext.data.validations.exclusionMessage = '不是可接受的值。';

//自定义数值范围验证
Ext.apply(Ext.data.validations,{
	number : function(config, value){
		if (value === undefined) {
            return false;
        }
        var min    = config.min,
            max    = config.max;
    
        if ((min && value < min) || (max && value > max)) {
            return false;
        } else {
            return true;
        }
	},
	numberMessage : '数值范围错误。'
});

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
         {name: 'name',     type: 'string'},
         {name: 'age',      type: 'int'},
         {name: 'phone',    type: 'string'},
         {name: 'gender',   type: 'string'},
         {name: 'username', type: 'string'},
         {name: 'alive',    type: 'boolean', defaultValue: true}
    ],
    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'number',  field: 'age', min : 30},
        {type: 'length',    field: 'name', min: 2},
        {type: 'inclusion', field: 'gender',   list: ['男', '女']},
        {type: 'exclusion', field: 'username', list: ['admin@xx.xx', 'user@xx.xx']},
        {type: 'format',    field: 'username',
        	//校验用户名是否为电子邮件格式
        	matcher: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/
        }
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    gender : 'man',
    username: 'abc'
}, 'User');
//执行数据验证
var errors = user.validate();
//获取验证信息
var message = [];
errors.each(function(v){
	message.push(v.field+' : '+v.message)
});
alert(message.join('\n'));

3、在模型中通过代理加载数据

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},
            {name: 'age', type: 'int'},
            {name: 'id', type: 'int'}
    ],
    //配置数据代理
    proxy: {
    	type : 'ajax',
        url : 'userServer.jsp'
    }
});
var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
    success: function(rec) {
    	alert(rec.get('name'));
    }
});

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+userId+", name: 'user"+userId+"'}");
%>

4、模型间的一对多关系

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},//用户名称
            {name: 'id', type: 'int'}//用户id
    ],
    //User与Product是一对多关系
    hasMany: {model: 'Product', name:'getProducts',autoLoad : false},
    proxy: {
    	type : 'ajax', 
        url : 'userServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
            {name: 'id', type: 'int'},//产品id
            {name: 'title', type: 'string'},//产品名称
            {name: 'user_id', type: 'int'}//用户id
    ],
    proxy: {
    	type : 'ajax',
        url : 'ProductServer1.jsp',
	    reader: {
            type: 'json',
            root: 'products'
        }
    }
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id为1的User实例
user.load(1, {
    success: function(rec) {
    	//获取user_id为1的产品Store
    	var products = rec.getProducts();
    	//加载user_id为1的产品数据
    	products.load({
    		callback : function(records, operation, success){
    			var msg = [];
    			for(var i = 0; i < records.length; i++){
    				var rec = records[i];
    				msg.push('产品名称：'+rec.get('title')+' 用户id：'+rec.get('user_id'));
    			}
    			alert(msg.join('\n'));
    		}
    	});
    }
});

ProductServer1.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '产品1', user_id : "+userId+"}, {id : 2, title: '产品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>

5、模型间的多对一关系

//注册分类数据模型Category
Ext.regModel('Category', {
    fields: [//定义模型字段
            {name: 'type', type: 'string'},//产品类型名称
            {name: 'id', type: 'int'}//产品类型id
    ],
    proxy: {
    	type : 'ajax', 
        url : 'CategoryServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
            {name: 'id', type: 'int'},//产品id
            {name: 'title', type: 'string'},//产品名称
            {name: 'category_id', type: 'int'}//用户id
    ],
    belongsTo : 'Category'
});
//创建product实例
var product = new Product({
    id: 100,
    category_id: 1,
    title: '产品1'
});
product.getCategory(function(category, operation){
	//获取类型名称
	alert(category.get('type'));
});

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String categoryId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+categoryId+", type: '产品类型"+categoryId+"'}");
%>

6、Ext.data.proxy.Memory示例

//创建数据模型
Ext.regModel('User', {
    fields: ['id','name','age']
});

//定义内存数据变量
var userData = {
    users : [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 30 },
        { id: 3, name: '王五', age: 40 }
    ]
};	

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        root: 'users'
    },
	data : userData
}); 		

//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){ 		//load方法的回调函数
	var totalRecords = result.resultSet.total;
	alert('读取内存数据，记录总是：'+totalRecords);
}

7、Ext.data.proxy.Ajax示例

//创建数据模型
Ext.regModel('Person', {
    fields: ['name','age']
});
//创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
	url : 'personServer.jsp',
	model: 'Person',
    reader: 'json'
});
//创建请求参数对象
var operation = new Ext.data.Operation({
    action: 'read'//设置请求动作为read
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
	//获取原始响应数据
	var responseText = operation.response.responseText;
	//获得记录总数
	var totalRecords = operation.resultSet.totalRecords;
	//获得记录数组
	var records = operation.resultSet.records;
	
	alert('使用Ajax代理读取远程数据，记录总是：'+totalRecords);
}

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
	response.setContentType("application/json;charset=UTF-8");
	String result = "[{name: '张三', age : 20}, {name: '李四', age : 30}]";
	response.getWriter().write(result);
%>

8、Ext.data.reader.Json示例

//JSON格式的用户及订单信息
var userData = {
	"total" : 2000,
	"users": [{
		"id": 123,
		"name": "张三",
		"orders": [{
			"id": 50,
			"total" : 100
		}]
	}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ],
    hasMany: 'Order'//定义User与Order之间的一对多关系
});
//定义订单Order模型
Ext.regModel("Order", {
    fields: [ 'id', 'total' ],
    belongsTo: 'User'//定义Order与User之间的多对一关系
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        type: 'json',//Ext.data.reader.Json读取器
        root: 'users'
    },
	data : userData
}); 
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
	//获取总记录数
	var count = result.resultSet.total;
	//获取第一个用户信息
	var user = result.resultSet.records[0];
	//获取该用户的第一个账单信息
	var order = user.orders().getAt(0);
	alert('总记录数：'+count+
		  '\n姓名：'+user.get('name')+
		  '\n账单金额：'+order.get('total'));
}

9、读取复杂的JSON数据

//JSON格式的用户及订单信息
var userData = {
	"users": [{
		"searchDate" : "2011-04-24",//查询时间
		"role" : "admin",//查询人角色
		"info" : {
			"id": 123,
			"name": "张三"
		}
	}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ]
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
	model : 'User',
	reader: {
        type: 'json',//Ext.data.reader.Json读取器
        root: 'users',
        record : 'info'//定位有效数据的位置
    },
	data : userData
}); 
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
	//获取第一个用户信息
	var user = result.resultSet.records[0];
	alert('姓名：'+user.get('name'));
}

10、Ext.data.Store示例

//定义用户User模型
Ext.regModel("User", {
    fields: ['name', 'age' ],
    proxy: {
        type: 'memory'
    }
});
//创建数据集对象
var myStore = new Ext.data.Store({
	autoLoad: true,
	data : [{name: '张三', age : 20}, 
            {name: '李四', age : 30}],
    model: 'User'
});
//遍历Store中的记录
var msg = ['遍历Store中的记录：'];
myStore.each(function(rec){
	msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));

11、Ext.data.ArrayStore示例

//定义用户User模型
Ext.regModel("User", {
    fields: ['name', 'age' ],
    proxy: 'memory'
});
//创建ArrayStore数据集对象
var myStore = new Ext.data.ArrayStore({
	autoLoad: true,
	data : [['张三',20],['李四',30]],//数组数据
    model: 'User'
});
//遍历Store中的记录
var msg = ['遍历ArrayStore中的记录：'];
myStore.each(function(rec){
	msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));