LoneTiger
8 Nov 2007, 3:06 AM
I came across an odd problem which I can't find a workaround for. It has to do with ComboBox class. I'm loading the data via DataStore and ArrayReader. It's fine when I call the DataStore.load method for the first time. Everything loads correctly and the 'load' event handler defined on the data store correctly loads the first value to be selected in combo box. The problem is on reload (again via DataStore.load) the loaded list is not displayed correctly (loaded OK) because I typed the filter text in before the reload occured. 'forceSelection', 'editable' and 'typeAhead' are set to true. Funny thing is the data loads correctly. The problem is that the filter text lingers along between loads. If I try to type ahaid again I can see the text that should be in the list gets displayed, its just not displayed when i expand the ComboBox. All work ok if I don't select the value by typing ahaid before the reload.
I'm using the ComboBox (es) inside a Ext.grid.PropertyGrid. It contains 3 combos. When one is changed, 2 others get reloaded. (see code below). I turned on the 3 properties from above to make selection faster.
Reader definition:
var reader = new Ext.data.ArrayReader({id: 0}, Ext.data.Record.create([
{name: 'Name', mapping: 'Name'},
{name: 'Value', mapping: 'Value'}
]));
Data store definition:
var createDataStore = function (data, propName) {
return new Ext.data.Store({
reader: reader,
proxy: new Ext.data.MemoryProxy(data),
listeners: {
'load': function() {
if (this.getTotalCount() > 0)
{
var v = this.getAt(0).get('Value');
combos[propName].setValue(v);
propsGrid.store.getById(propName).set('value', v);
}
}
}
});
};
The function that inits the combo. If I pass an existing combo in it would work on that rather than create a new one:
initCombo: function (existingCombo, propName, data, changeHandler) {
var dataStore = createDataStore(data, propName);
var answer = existingCombo;
if (!answer) {
answer = new Ext.form.ComboBox({
store: dataStore,
valueField: 'Value',
displayField: 'Name',
triggerAction: 'all',
mode: 'local',
editable: true,
selectOnFocus: true,
forceSelection: true,
lazyInit: true,
resizable: true,
typeAhead: true
});
}
if (changeHandler)
answer.addListener('change', changeHandler);
var editor = new Ext.grid.GridEditor(answer);
return { combo: answer, editor: editor, store: dataStore };
}
Here I define the comboc on page load:
var serversComboDefinition = this.initCombo(null, 'Server', serverList, this.serversComboChanged);
combos['Server'] = serversComboDefinition.combo;
var callersComboDefinition = this.initCombo(null, 'CallerId', callerList);
combos['CallerId'] = callersComboDefinition.combo;
var portfoliosComboDefinition = this.initCombo(null, 'PortfolioRef', portfolioList);
combos['PortfolioRef'] = portfoliosComboDefinition.combo;
And here's the is the whole proc initing the Properties Grid:
propsGrid = new Ext.grid.PropertyGrid
({
el: settingsPanel.getEl(),
nameText: 'Properties Grid',
autoWidth: false,
autoHeight: true,
width: 250,
autoExpandColumn: 'value',
viewConfig: {
forceFit: true,
scrollOffset: 2
}
});
propsGrid.getColumnModel().setConfig
([
{header: 'name', width: 50, sortable: true, dataIndex: 'name', id: 'name'},
{header: 'value', width: 100, sortable: false, resizable:false, dataIndex: 'value', id: 'value'}
]);
propsGrid.setSource({
'Server': (serverList[0] ? serverList[0].Name : ''),
'CallerId': (callerList[0] ? callerList[0].Name : ''),
'ClientTimeout': 125000,
'ServerTimeout': 120000,
'PortfolioRef': (portfolioList[0] ? portfolioList[0].Name : '')
});
propsGrid.customEditors = {
'Server': serversComboDefinition.editor,
'CallerId': callersComboDefinition.editor,
'PortfolioRef': portfoliosComboDefinition.editor
};
propsGrid.render();
serversComboDefinition.store.load();
callersComboDefinition.store.load();
portfoliosComboDefinition.store.load();
Here is the handler that is run after the Server combo has trigered the data reload:
serverChangedDataLoaded: function (success) {
if (success) {
combos['CallerId'].clearValue();
combos['PortfolioRef'].clearValue();
combos['CallerId'].reset();
combos['PortfolioRef'].reset();
combos['CallerId'].store = createDataStore(callerList, 'CallerId');
combos['PortfolioRef'].store = createDataStore(portfolioList, 'PortfolioRef');
combos['CallerId'].store.load();
combos['PortfolioRef'].store.load();
}
}
You can see I tried adding a couple of lines to reset and clear the combos. Is there something like ComboBox.clearFilter() or similar? Am I doing something wrong using the ArrayReader. The data is returned from server as json via AjaxPro but it has to be modified and rearanged first before sending it off to ComboBox.
Any ideas what might be wrong welcome.
I'm using the ComboBox (es) inside a Ext.grid.PropertyGrid. It contains 3 combos. When one is changed, 2 others get reloaded. (see code below). I turned on the 3 properties from above to make selection faster.
Reader definition:
var reader = new Ext.data.ArrayReader({id: 0}, Ext.data.Record.create([
{name: 'Name', mapping: 'Name'},
{name: 'Value', mapping: 'Value'}
]));
Data store definition:
var createDataStore = function (data, propName) {
return new Ext.data.Store({
reader: reader,
proxy: new Ext.data.MemoryProxy(data),
listeners: {
'load': function() {
if (this.getTotalCount() > 0)
{
var v = this.getAt(0).get('Value');
combos[propName].setValue(v);
propsGrid.store.getById(propName).set('value', v);
}
}
}
});
};
The function that inits the combo. If I pass an existing combo in it would work on that rather than create a new one:
initCombo: function (existingCombo, propName, data, changeHandler) {
var dataStore = createDataStore(data, propName);
var answer = existingCombo;
if (!answer) {
answer = new Ext.form.ComboBox({
store: dataStore,
valueField: 'Value',
displayField: 'Name',
triggerAction: 'all',
mode: 'local',
editable: true,
selectOnFocus: true,
forceSelection: true,
lazyInit: true,
resizable: true,
typeAhead: true
});
}
if (changeHandler)
answer.addListener('change', changeHandler);
var editor = new Ext.grid.GridEditor(answer);
return { combo: answer, editor: editor, store: dataStore };
}
Here I define the comboc on page load:
var serversComboDefinition = this.initCombo(null, 'Server', serverList, this.serversComboChanged);
combos['Server'] = serversComboDefinition.combo;
var callersComboDefinition = this.initCombo(null, 'CallerId', callerList);
combos['CallerId'] = callersComboDefinition.combo;
var portfoliosComboDefinition = this.initCombo(null, 'PortfolioRef', portfolioList);
combos['PortfolioRef'] = portfoliosComboDefinition.combo;
And here's the is the whole proc initing the Properties Grid:
propsGrid = new Ext.grid.PropertyGrid
({
el: settingsPanel.getEl(),
nameText: 'Properties Grid',
autoWidth: false,
autoHeight: true,
width: 250,
autoExpandColumn: 'value',
viewConfig: {
forceFit: true,
scrollOffset: 2
}
});
propsGrid.getColumnModel().setConfig
([
{header: 'name', width: 50, sortable: true, dataIndex: 'name', id: 'name'},
{header: 'value', width: 100, sortable: false, resizable:false, dataIndex: 'value', id: 'value'}
]);
propsGrid.setSource({
'Server': (serverList[0] ? serverList[0].Name : ''),
'CallerId': (callerList[0] ? callerList[0].Name : ''),
'ClientTimeout': 125000,
'ServerTimeout': 120000,
'PortfolioRef': (portfolioList[0] ? portfolioList[0].Name : '')
});
propsGrid.customEditors = {
'Server': serversComboDefinition.editor,
'CallerId': callersComboDefinition.editor,
'PortfolioRef': portfoliosComboDefinition.editor
};
propsGrid.render();
serversComboDefinition.store.load();
callersComboDefinition.store.load();
portfoliosComboDefinition.store.load();
Here is the handler that is run after the Server combo has trigered the data reload:
serverChangedDataLoaded: function (success) {
if (success) {
combos['CallerId'].clearValue();
combos['PortfolioRef'].clearValue();
combos['CallerId'].reset();
combos['PortfolioRef'].reset();
combos['CallerId'].store = createDataStore(callerList, 'CallerId');
combos['PortfolioRef'].store = createDataStore(portfolioList, 'PortfolioRef');
combos['CallerId'].store.load();
combos['PortfolioRef'].store.load();
}
}
You can see I tried adding a couple of lines to reset and clear the combos. Is there something like ComboBox.clearFilter() or similar? Am I doing something wrong using the ArrayReader. The data is returned from server as json via AjaxPro but it has to be modified and rearanged first before sending it off to ComboBox.
Any ideas what might be wrong welcome.