数据代理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'));
}
});
});
})();
//注册用户数据模型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'));
