Using a ComboBox with forceSelection:false in an EditorGrid

[AdamDawes]

I'm trying unsuccessfully to use a ComboBox control whose forceSelection option is set to false in an EditorGrid.

All the time I am selecting items that exist in the ComboBox's drop down list, all is well. But if I type in a value not present in the list, the grid just discards it and reverts the cell back to its previous value.

I tried hooking up handlers into the grid's afteredit and validateedit events to see if I could grab the value out and put it into the appropriate record, but these events don't fire when I have typed into the combo (though they do fire when I select an entry from the drop down list).

I can't think of anything else to try.

Can anyone provide any help so that I can get this working? I've spent all day trying to do this and I'm getting nowhere.

My thanks in advance,

[AdamDawes]

Well I eventually found a solution of sorts to this, though I think it's pretty ugly.

In the grid's beforeedit event, I store away the details of the record and the field that is being edited.

In the combobox's blur and specialkey events, I retrieve this record, and call its set method, passing in the value returned from getRawValue() on the combobox.

This works but isn't very neat and tidy -- IMHO it would be much better if the combobox/grid provided this functionality automatically.

[Xouqoa]

I'm having the same trouble. I'd like to be able to have the user type in additional values into the ComboBox and then insert those as new values into a database table but I haven't been able to get the value to stick. I can type text into the CB, but when I leave the box or hit enter or whatever, if I don't have a value that already exists in the CB it just reverts to what it was and none of the actions in the renderer fire off. (I tested that with the console.log debugging statements.)

Any ideas/suggestions than the one mentioned above?

DataStore:



var ds_topping_categories = new Ext.data.JsonStore({
url: 'queries/queries_topping.cfc?method=get_topping_categories&returnformat=json',
root: 'topping_category',
id: 'topping_category_id',
fields: ['topping_category_id', 'topping_category_name']
});

ds_topping_categories.load();


ColumnModel (relevant portion):



var cm = new Ext.grid.ColumnModel([
{
header: "Topping Category",
dataIndex: 'topping_category_id',
width: 125,
sortable: true,
editor: new Ext.grid.GridEditor(new Ext.form.ComboBox({
name: 'topping_category_id',
hiddenName: 'topping_category_id',
store: ds_topping_categories,
allowBlank: false,
valueField: 'topping_category_id',
displayField: 'topping_category_name',
triggerAction: 'all',
mode: 'local',
selectOnFocus: true,
typeAhead: true,
lazyRender: true
})),
renderer: function(value, p, record) {
//console.log(value);
//console.log(p);
//console.log(record);
category_record = ds_topping_categories.getById(value);
if (category_record) {
console.log(category_record);
return category_record.data.topping_category_name;
}
else {
console.log('record: '+record);
return record.get('topping_category_id');
}
}
}
]);

[Xouqoa]

One time bump to get this up from page 4. I've been scouring the forums looking for another similar situation or a demo that has this working but haven't found one yet. :(

[AdamDawes]

Xouqoa,

Did the suggestion I posted above not work for you? I've been using it in my grids here and it works fine. I still think the grid/combo should to this automatically, but in lieu of that, this seems like an acceptable work-around?

[Xouqoa]

Xouqoa,

Did the suggestion I posted above not work for you? I've been using it in my grids here and it works fine. I still think the grid/combo should to this automatically, but in lieu of that, this seems like an acceptable work-around?

I'm going to try it today, I was just looking for a (hopefully) cleaner approach since you didn't sound too sure of yours. :) Do you have any example code? I'm not having any luck getting the blur event to fire for the CB.

[AdamDawes]

Hi Xouqoa,

I'm sure my way does work, as I've been using it since I posted about it. It's just not the tightest or cleanest piece of code I've ever written. :s

I've added created a variable called "testGrid_currrecord". I then create a function that sets this variable each time an edit begins:

var testGrid_currrecord;
function testGrid_beforeedit(e) {
testGrid_currrecord = e.record;
}
This is then set into the grid's beforeedit event:

TestGrid.on('beforeedit', testGrid_beforeedit);
I then set up an afteredit function for the combobox:

function gridCombo_afteredit() {
if (testGrid_currrecord != undefined) {
testGrid_currrecord.set('GridCombo', GridCombo.getRawValue());
testGrid_currrecord = undefined;
}
}
The afteredit function is applied to the combobox events as follows:

GridCombo.on('blur', gridCombo_afteredit);
GridCombo.on('specialkey', gridCombo_afteredit);
GridCombo.on('change', gridCombo_afteredit);
GridCombo.on('select', gridCombo_afteredit);
This seems to work fine.

If anyone has any better suggestions to how to achieve this, I'd love to hear them too.