View Full Version : Trying to switch store for Combo inside the grid cell dynamically, not working

14 Nov 2009, 7:27 PM
Help please. Spent 3 days investigating already, no success.

I am trying to switch the Store for ComboBox ( which is inside the grid cell ) dynamically, not working

So I have editable grid with 5 columns depending on the ComboBox selection in the 2nd column(fieldName) the 3rd column(sValue) should be populated (on Expand event) with the appropriate data. So it was working when the store was static loading the list from the Array(this.valueData which is getting data dynamically from another external store loading data from .xml file) like this:

// default value initialization
this.valueData = valData[0] = [[0,'', '']];

this.valuesReader = new Ext.data.ArrayReader({}, ['id','text', 'value']);

this.comboValueStore = new Ext.data.Store({
reader: this.valuesReader,
proxy: new Ext.data.MemoryProxy(this.valueData),
autoLoad: true

this.searchValuesCombo = new Ext.form.ComboBox({
id: 'cmbFindValue',
store: this.findValueStore,
displayField: 'Name',
typeAhead: false,
loadingText: 'Loading',
mode: 'remote',
forceSelection: false,
triggerAction: 'all',
emptyText:'Select value...',

this.colModel = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({locked:true}),
{header: "DisplayOrder",dataIndex: 'DisplayOrder',hidden: true,editor:new Ext.form.TextField()},
{header: this.FieldNameLabel,dataIndex: 'fieldName',width: 240,sortable:false,editor: this.searchFieldNamesCombo},
{header: this.FieldValueLabel,width:230,dataIndex:'sValue',sortable:false,editor:this.searchValuesCombo},


SearchGrid.superclass.constructor.call(this, {
store: this.store,
cm: this.colModel,
selModel: new Ext.grid.RowSelectionModel(),
draggable: false,
enableColumnMove: false,

That all was working fine until I added feature that the 3nd column can have not only static list of values in the Combo, but sometime also need to get the data by Google Suggest from the database showing the user all matching values starting from the user input(for example input 'al' it will show list of first 10 names found staring from 'al').

// Dynamic Google-style Find Xml Store
this.findValueStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: Awse.URLs.GetSecNames

reader: new Ext.data.DynamicXmlReader({
record: 'row',
id: '@symbol',
totalRecords: '@TotalRecords',
recordDefinition: 'recordDefinition'
baseParams: {start:0, limit:10, sort: 'Name', dir:'ASC', find:'', fType:fType, filter:''},
remoteSort: true

So, the static COmbo still works, and if I go row-by-row selecting different values in the 2nd column(fieldName) the 3rd column will be re-loaded correctly with new COmbo list from the static store (comboValueStore), but when I switch the 2nd column value to the one which will use Google Suggest in the 3rd column - all the values found are either coming as a list of empty rows or just showing a list of previously loaded static combo values.

Here is how I am changing the store:

// when clicked Values Combo - update the items inside
this.searchValuesCombo.on('expand', function(){
var record = this.getSelectionModel().getSelected();

if(record.data.ctrl == 0)
this.findValueStore.sortInfo = {
field: record.data.param,
direction: 'ASC'

this.searchValuesCombo.tpl = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
this.searchValuesCombo.store = this.findValueStore;
this.searchValuesCombo.valueField = '';
this.searchValuesCombo.mode = 'remote';
this.searchValuesCombo.displayField = record.data.param;//'Name' or other;
this.searchValuesCombo.emptyText = 'Select value...';

this.searchValuesCombo.store.load({callback: function(r,options,success) {
if(success == true)
var searchGrid = Ext.getCmp("searchEditGrid");
searchGrid.searchValuesCombo.view.store = searchGrid.findValueStore;
// searchGrid.searchValuesCombo.view.tpl.html = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
// searchGrid.searchValuesCombo.view.tpl.tpls[0].body = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
return true;
} });


this.searchValuesCombo.tpl = '<tpl for="."><div class="x-combo-list-item">{text}</div></tpl>';
this.searchValuesCombo.store = this.comboValueStore;
this.searchValuesCombo.valueField = 'value';
this.searchValuesCombo.mode = 'local';
this.searchValuesCombo.displayField = 'text';
this.searchValuesCombo.emptyText = '';
return true;
}, this);

I mentioned during debugging that the store seems to be switched and I can see all data in debugging, but not on the screen. When I debugged even more - I found that there is also searchGrid.searchValuesCombo.view.store which is having old data no matter what I am doing. reset(), refresh() or whatever. Please help. It is really a pain without any solution for 3 days. I need somehow to refresh the loaded data.

Also hint: whatever store is selected first - works, so if GoogleSuggest was first - it works, but switching to the static ones is broken. And vice versa.

Issue #2:

When even in the same Google Suggest, but reloading the sortInfo columnName and tpl. Anyway see in debugger the reloaded store for combo, but old store for combo.view.store and in particular tpl is wrong, which I tried to override like this and it did not help either:

searchGrid.searchValuesCombo.view.tpl.html = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';
searchGrid.searchValuesCombo.view.tpl.tpls[0].body = '<tpl for="."><div class="x-combo-list-item">{' + record.data.param + '}</div></tpl>';

15 Nov 2009, 11:14 PM
Please reread the API docs. Most combobox options you are trying to change are listed as config options and not as writable properties. This means that you can't change them (or that you need to use a setter method like bindStore)!

Your solution is flawed anyway. You should have written a getCellEditor method (see example (http://extjs.com/forum/showthread.php?p=141782#post141782)).