View Full Version : How to make a grid cell immediately exit edit mode when a combo box item is selected?

James Quall
14 Apr 2013, 9:39 AM
I have configured an Ext JS 4 grid to be editable by utilising the CellEditing plugin. Some cells in the grid have a textfield editor, and a few use a combo box editor. It all works great, but I have a small problem with the default behaviour of combo box editors.
Basically, when editing a cell that has a combo box editor, if you select an item from the dropdown with your mouse, the "edit" mode of that cell doesn't finish. In other words, the cell doesn't immediately go out of edit mode and get marked as dirty. Instead, it will just sit there in edit mode until you go and click somewhere else on the page.
I think it is unusual that Sencha has made this the default behaviour for combo box editors, but I won't complain. I would just like to know how to be able to select a combo box item and immediately take the cell out of edit mode, but I have no idea where to define this custom behaviour.
Here's a small example JS fiddle to play with:

14 Apr 2013, 11:52 PM
What if you complete editing on select of the combo?

xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name',
listeners: {

select: {

fn: function(c, r, eopts) {





James Quall
15 Apr 2013, 4:34 AM
Thanks. That works, but I found that it crashes the browser sometimes due to some recursive calls to completeEdit().

That said, I discovered this solution that works pretty well, courtesy of StackOverflow:

select: function(c, r, eopts) {