EXTJS4自学手册——EXT数据结构组件（proxy代理类之服务器端代理）

一、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