Extjs4 使用store的post方法

浏览数：46 / 时间：2015年06月09日

Extjs4 使用store的post方法

引用官网的一句话

　　Now when we call store.load(), the AjaxProxy springs into action, making a request to the url we configured (‘users.json‘ in this case). As we‘re performing a read, it sends a GET request to that url (see actionMethods to customize this - by default any kind of read will be sent as a GET request and any kind of write will be sent as a POST request).

`我们点进去看看它源码:`

Ext.define(‘Ext.data.proxy.Ajax‘, {
    requires: [‘Ext.Ajax‘],
    extend: ‘Ext.data.proxy.Server‘,
    alias: ‘proxy.ajax‘,
    alternateClassName: [‘Ext.data.HttpProxy‘, ‘Ext.data.AjaxProxy‘],
    
    /**
     * @property {Object} actionMethods
     * Mapping of action name to HTTP request method. In the basic AjaxProxy these are set to ‘GET‘ for ‘read‘ actions
     * and ‘POST‘ for ‘create‘, ‘update‘ and ‘destroy‘ actions. The {@link Ext.data.proxy.Rest} maps these to the
     * correct RESTful methods.
     */
    actionMethods: {
        create : ‘POST‘,
        read   : ‘GET‘,
        update : ‘POST‘,
        destroy: ‘POST‘
    },
    
    // Keep a default copy of the action methods here. Ideally could just null
    // out actionMethods and just check if it exists & has a property, otherwise
    // fallback to the default. But at the moment it‘s defined as a public property,
    // so we need to be able to maintain the ability to modify/access it. 
    defaultActionMethods: {
        create : ‘POST‘,
        read   : ‘GET‘,
        update : ‘POST‘,
        destroy: ‘POST‘    
    },
　　... ... ...
}

到这里,我想你的思路也很清晰了.具体做法如下

`1.覆盖 actionmathods 方法:`

Ext.define(‘Sencha.store.Users‘, {
    extend: ‘Ext.data.Store‘,

    config: {
        model: ‘Sencha.model.Users‘,
        autoLoad: true,
        proxy: {
            type: ‘ajax‘,
            actionMethods: {
                create : ‘POST‘,
                read   : ‘POST‘, // by default GET
                update : ‘POST‘,
                destroy: ‘POST‘
            },
            url: ‘teams.json‘
        }
    }
});

var mystore = Ext.create(‘Ext.data.Store‘, {
        // 分页大小
        pageSize : 20,
        model : ‘mydata‘,
        storeId : ‘mystore‘,
        proxy : {
            type : ‘ajax‘,
            actionMethods : {
                create : ‘POST‘,
                read : ‘POST‘, // by default GET
                update : ‘POST‘,
                destroy : ‘POST‘
            },
            url : mj.basePath + ‘service/user!datagrid.cy‘,
            reader : {
                root : ‘leafData‘,
                totalProperty : ‘totalRows‘
            }
        },
        sorters : [ {
            property : ‘createTime‘, // 排序字段
            direction : ‘desc‘// 默认ASC
        } ]
    })

2. 覆盖 defaultActionMethods 方法:

var mystore = Ext.create(‘Ext.data.Store‘, {
        // 分页大小
        pageSize : 20,
        model : ‘mydata‘,
        storeId : ‘mystore‘,
        proxy : {
            type : ‘ajax‘,
            defaultActionMethods : {
                create : ‘POST‘,
                read : ‘POST‘, // by default GET
                update : ‘POST‘,
                destroy : ‘POST‘
            },
            url : mj.basePath + ‘service/user!datagrid.cy‘,
            reader : {
                root : ‘leafData‘,
                totalProperty : ‘totalRows‘
            }
        }

3. or define your own proxy class

Ext.define(‘Sencha.data.PostAjax‘, {
    extend: ‘Ext.data.proxy.Ajax‘,
    alias: ‘proxy.postproxy‘, // must to get string reference
    config: {
       actionMethods: {
            create : ‘POST‘,
            read   : ‘POST‘, // by default GET
            update : ‘POST‘,
            destroy: ‘POST‘
        },
    }
}


Ext.define(‘Sencha.store.Teams‘, {
    extend: ‘Ext.data.Store‘,

    config: {
        model: ‘Sencha.model.Team‘,
        autoLoad: true,
        proxy: {
            type: ‘ajaxpost‘
            url: ‘teams.json‘
        }
    }
});