PDA

View Full Version : ComboBox in a Grid



paulharv
20 Jul 2010, 5:17 AM
Hi,

I'm using ComboBox in a grid, (code snippet is below).
On focus I load the store passing a param so I get the specific options for that row.

The issue I'm having is that when the user types or selects a value and then presses the [ENTER] key, the ComboBox in the next row down receives focus, and expands but gets populated with the previous row's options.
I know that the focus event is firing, but it seems that in this scenario the options get rendered before the reload of the store...
When I activate a ComboBox with the mouse this problem does not occur.

Any suggestions on how to prevent this? For example can I prevent the Enter Key from giving focus and expanding the ComboBox?

Thanks



var cm = new Ext.grid.ColumnModel({
columns: [
{
header: scaffoldPanel.labels['innovation[category_text]'],
dataIndex: 'innovation[category_text]',
width: 120,
renderer: function(value, cell) {
var str = "<p style='white-space:normal'>" + value + "</p>";
return str;
},
editor: new Ext.form.ComboBox({
typeAhead: true,
lazyRender: true,
displayField: 'label',
triggerAction: 'all',
mode: 'local',
store: new Ext.data.JsonStore({
restful: true,
url: Ext.ratingwidget.Rater.getCategoriesUrl(),
root: 'hashes',
fields: ['value','label']
}),
listeners: {
'focus' : function(combo){
store = combo.getStore();
store.load({
params: {recordId: panel.selectedRecordId}
});
}
}
})
}
...
});

paulharv
20 Jul 2010, 9:33 AM
This post http://www.sencha.com/forum/showthread.php?4888-Disabling-Tab-And-Enter-In-EditorGrid&p=77429#post77429 had this code which does what I need...



var theSelectionModel = grid.getSelectionModel();
theSelectionModel.onEditorKey = function(field, e)
{
var k = e.getKey(), newCell, g = theSelectionModel.grid, ed = g.activeEditor;
if(k == e.ENTER && !e.ctrlKey){
e.stopEvent();
ed.completeEdit();
}
};