Sunday, December 30, 2012

Be careful when you use extraparams in proxy in ExtjJS 4; you should use baseparams!


Problem with proxy extra params: proxy is common to all stores created with this proxy! Example:

var countries1, countries2;
countries1 = Ext.create( "MyApp.store.Countries");
// add parameter 'countriesId' = 1
countries1.getProxy().setExtraParam( "countriesId", 1)
countries1.load();
countries2 = Ext.create( "MyApp.store.Countries");
// add parameter 'countriesId' = 2
countries2.getProxy().setExtraParam( "countriesId", 2)
countries2.load({
    callback: function(){
        countries1.load(); // 'countriesId' is no more 1, but 2 !!!
    }
});    

I advise you to create your own store class which implements base parameters if you want to set parameters before calling 'load' function with several stores of the same type.

Ext.define( "MyStore",{
    extend: "Ext.data.Store",
    baseParams: null,
    /**
     * add base parameter to store.baseParams
     * @param {Object} key/value object: {key: value}
     */
    addBaseParam: function(obj){
        Ext.apply( this .baseParams, obj);
    },
    /**
     * add several base parameters to store.baseParams
     * @param {Array}: array of key/value object: [{key1: value1, key2: value2,...}]
     */
    addBaseParams: function(objects){
        var me = this ;
        if (Ext.isArray(objects)){
            Ext. each(objects, function (obj){
                me.addBaseParam(obj);
            })
        } else if (objects){
            me.addBaseParam(objects);
        }
    },
    /**
     * reset base parameters
     */
    resetBaseParams: function(){
        this .baseParams = {};
    },
    /**
     * constructor
     * @param {object} config
     */
    constructor: function(config) {
        var me = this ;
        // manage base params
        me.baseParams = me.baseParams || {};
        // call parent
        me.callParent(arguments);
    },
    /**
     * override load method to add base params to request params
     * @param {Object} options
     */
    load: function(options){
        var me = this ;
        options = options || {};
        options.params = options.params || {};
        Ext.applyIf(options.params, me.baseParams);
        me.callParent([options]);
    }
});

No comments: