How to send extra parameters when loading a store to a combobox in ExtJS 4?

Question

How do I send extra parameters when using a store for a combobox in ExtJS 4?

I know that I can use "extraParams" in the proxy-settings, but that will affect ALL elements that is using the same store.

I.e if I have a Grid that is using a store called "Users" that will list all users in a system. At the same time, I have a combobox, that also uses the store "Users", but this time I want to list all Users that has "status=2", thus I want to send the param "&status=2" on the Ajax call to the back-end.

If I use something like:

store.getProxy().extraParams = {
  status: 2
};

It will work, but the Grid will at the same time be updated to also use "&status=2". I ONLY want the combobox to use the param.

I guess I could turn off "autoupdate" on the Grid, then set the "extraParams" on the "render" event on the combobox and then unset it when the combobox gets hidden, but what would be a very ugly solution.

I can also duplicate the store to a "Users2" and use that one for the combobox, but that is a ugly solution as well.

What is the correct way to do this? It must be a very common thing for most people.

UPDATE 1:

I know I can use something like:

store.load({
  params:{
    'foo1': bar1,
    'foo2': bar2
  } 
});

But how would I use that in ExtJS 4 MVC? There I just specify "store: Users" in the form-object. How would I send those extra parameters to the .load() function?

I have tried the following:

{
xtype: 'combobox',
fieldLabel: 'Server',
name: 'server',

//store: 'ServersIP',
store: new Cloud.store.ServersIP(),

/*
listeners: {
    beforeload: function(store, options) {
        console.log(store);
    }
},
*/

valueField: 'id',
displayField: 'name_id',
emptyText: 'Select a Server...',
editable: false
},

However, it gives error "Uncaught TypeError: Cannot read property 'ServersIP' of undefined"

But the name is correct:

Ext.define('Cloud.store.ServersIP', {

extend: 'Ext.data.Store',
model: 'Cloud.model.Server', 

Also, where exactly would I put the listener? I assume I did not get that one correct in my example either?

UPDATE 2:

I've got a little bit further to a solution now:

store: Ext.create('Cloud.store.ServersIP', {
proxy: {
    extraParams: {
        param1: 'value1',
        param2: 'value2'
    }
},                          
}),

The above does NOT work. It works if I only have a "one-level" variable in the params to Ext.Create. For some reason, it does not like it when I pass in proxy => extraParams => param1.

This one works:

store: Ext.create('Cloud.store.ServersIP', {
aaa: 'bbb'
}),

But then of course, my extraParams are not there. Anyone know how to fix this last part?

Answer 1

I just solved this problem. combobox queryMode:remote with extra parameters.

just instantiate the store in "VIEW" inside initComponent and override the proxy

//instantiate the store

var store = Ext.create('Cloud.store.ServersIP', {
    storeId: 'YourStoreId'
});
store.proxy.extraParams = { param1: 'value1', param2: 'value2' };

and in xtype:combobox

//set combobox store

{
    xtype: 'combobox',
    queryMode:'remote',
    store : Ext.data.StoreManager.lookup('YourStoreId'),
    ...
    ...
}

I hope you understand my proposed solution.

Answer 2

You can catch the 'beforeload' store event and alter the current load-operation. This way the parameters won't persist to other requests.

Ext.create('Ext.data.Store', {
    model: MyModel,
    autoLoad: true,
    listeners:{
        // Fires before a request is made. op is an Ext.data.Operation object
        beforeload:function(store,op){ 
            // Set request parameters (without overriding other parameters)
            op.params = Ext.apply(op.params||{},{
                someParam:true
            });
        }
    }
});