一、AjaxProxy
说明:这是最常用的代理,通过ajax和服务器交互数据
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
fields: [{
name: 'id', type: 'int'
}, {
name: 'name', type: 'string'
}, {
name: 'age', type: 'int'
}],
proxy: {
//通过ajaxProxy和服务器交互数据
type: 'ajax',
//服务器路径
url: 'http://www.cnblogs.com/Scripts/data.js'
}
});
//加载数据
var myInfo = Ext.ModelMgr.getModel('MyInformation').load(1, {
success: function (info) {
console.log(info.get('name'));
}
});
});
</script>
数据:
{
id: 1,
name: 'AAA',
age: 34
}
执行结果:
二、使用ajax代理时为增删改查方法设置不同的服务器路径
说明:使用api属性,可以为增删改查方法设置不同路径
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
fields: [{
name: 'id', type: 'int'
}, {
name: 'name', type: 'string'
}, {
name: 'age', type: 'int'
}],
proxy: {
//通过ajaxProxy和服务器交互数据
type: 'ajax',
//为增删改查方法设置不同的路径
api: {
create: "createURL",
read: "http://www.cnblogs.com/Scripts/data.js",
update: "updateURL",
destroy: "destroyURL"
}
}
});
//通过read属性指定的URL获取数据
Ext.ModelMgr.getModel('MyInformation').load(1, {
success: function (info) {
//通过update属性指定的Url更新
//更改属性
info.set("name", "BBB");
//同步到服务器
info.save();
//通过destroy属性指定的URL删除数据
info.destroy();
}
});
//创建数据
var myInfo = Ext.ModelManager.create({
id: 2,
name: 'CCC',
age: 34
}, 'MyInformation');
通过update属性指定的URL保存数据
myInfo.save();
});
</script>
执行结果:
三、rest代理
说明,rest代理是ajax代理的子集,他自动创建了增删改查的API,但是用的是同一个URL,请与第二条对照学习
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
fields: [{
name: 'id', type: 'int'
}, {
name: 'name', type: 'string'
}, {
name: 'age', type: 'int'
}],
proxy: {
//通过restProxy和服务器交互数据
type: 'rest',
//为增删改查方法路径
url: 'http://www.cnblogs.com/Scripts/data.js'
}
});
//通过read属性指定的URL获取数据
Ext.ModelMgr.getModel('MyInformation').load(1, {
success: function (info) {
//通过update属性指定的Url更新
//更改属性
info.set("name", "BBB");
//同步到服务器
info.save();
//通过destroy属性指定的URL删除数据
info.destroy();
}
});
//创建数据
var myInfo = Ext.ModelManager.create({
id: 2,
name: 'CCC',
age: 34
}, 'MyInformation');
通过update属性指定的URL保存数据
myInfo.save();
});
</script>
执行结果:
四、JsonP代理
说明:与ajax代理不同的地方在于,JsonP代理是跨域的
例子:
<script type="text/javascript">
Ext.onReady(function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend: 'Ext.data.Model',
fields: [{
name: 'id', type: 'int'
}, {
name: 'name', type: 'string'
}, {
name: 'age', type: 'int'
}],
proxy: {
//通过jsonP代理和服务器交互数据
type: 'jsonp',
//设置服务器路径,可以跨域
url: 'http://www.baidu.com'
}
});
//从指定的服务器加载数据
Ext.ModelMgr.getModel('MyInformation').load();
});
</script>
执行结果:
注:和服务器交互时,还能传递分页条件,排序条件等信息,详见API