View Full Version : Combobox in grid: saving data in a different store

29 Jul 2009, 1:23 AM
Hello to everybody,

I succesfully implemented a ComboboxColumn following the directions in the ExtJS API documentation, and it shows the correct value in a EditableGridPanel by employing its own store to load data remotely.

So, I've got a store for the grid, and a store for the combobox which performs a call to a different remote URL.

However, I'd like to be able to save data in this second store, instead of having the first store trying to perform the update (I'd like to stop that event, too).

So, what event should I intercept/set up to do the update via the combobox store instead of the grid one?


Some code:

Ext.ns ('Gallows.ui', 'Gallows.data');

Gallows.ui.ComboboxForGrid = Ext.extend (Ext.form.ComboBox,
typeAhead: true,
triggerAction: 'all',
lazyRender: true,
mode: 'remote',
editable: true,
valueField: 'id',
displayField: null,

// Store will be set in initComponent, the others
// have to be specified when constructing the object.
store: null,
displayColumn: null,
requestUrl: null,

initComponent : function ()
if (this.requestUrl == null || this.displayColumn == null)
throw 'requestUrl hasn\'t been specified while constructing the ComboboxForGrid object.';

this.displayField = this.displayColumn['name'];

this.store = new Ext.data.JsonStore ({
autoDestroy: true,
restful: true,
method: 'GET',
url: this.requestUrl,
idProperty: 'id',
totalProperty: 'total',
successProperty: 'success',
baseParams: {
'authenticity_token': Gallows.authenticity_token,
'format': 'extjs'
root: 'data',
fields: [
{ name: 'id', type: 'int' },

// Force the loading of the store
this.store.load ();

// super
Gallows.ui.ComboboxForGrid.superclass.initComponent.apply (this, arguments);

} // ~ initComponent ()


// The column configuration class for easier rendering

Gallows.ui.ComboboxColumn = Ext.extend (Ext.grid.Column,
requestUrl : null,
displayColumn : null,

constructor : function (config)
Ext.apply (this, config);

if (this.editor == undefined)
this.editor = new Gallows.ui.ComboboxForGrid ({
requestUrl: this.requestUrl,
displayColumn: this.displayColumn

this.scope = this.editor;

Gallows.ui.ComboboxColumn.superclass.constructor.call (this, arguments);

// Helper function for the ComboBox renderer when used
// inside the Grid
,renderer : function (value)
var record = this.findRecord (this.valueField, value);
return record ? record.get (this.displayField) : this.valueNotFoundText;

Ext.reg ('gallows-comboboxcolumn', Gallows.ui.ComboboxColumn);
Ext.grid.Column.types['gallows-comboboxcolumn'] = Gallows.ui.ComboboxColumn;