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

10
votes

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?

5
javascriptextjsextjs4extjs4.1extjs4.2
Add a beforeload listener to the store – existdissolve

5 Answers

9
votes

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.

2
votes

Instead of referencing the same store as the grid you can create a new instance of the same store. This way the two store instances are managed separately.

So in your form replace store: 'Users' with store: new MyApp.store.Users() and then you can use whichever method works better for you (extraparams, load with params, beforeload listener, etc)

2
votes

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
            });
        }
    }
});
1
votes

You can set autoLoad to false on your store, and then call the load method yourself, and use the params option:

var store = Ext.create('My.Store', {
    autoLoad: false
    ...
});

store.load({
    params: {status: 2}
});

That will work if you need your combo to load only once and then query in local mode. If you need your combo to make multiple calls to the server (remote mode), set your params in the beforeload event of the store:

comboStore.on('beforeload', function(store, operation) {
    operation.params = operation.params || {};
    operation.params.status = 2;
});
1
votes

This is the best code I could come up with. No listener is needed :)

Create a new instance of the "users"-store and change the params in that one.

xtype: 'combobox',
fieldLabel: 'Users',
name: 'users',

store: (function() {
  var s = Ext.create('MyApp.store.Users');
  s.proxy.extraParams = {
    active: '1'
  }
  return s;
})(),