Geek Answers Handbook

In an editable grid, how do I make an Ext combo box, immediately end edit mode when I select an item?

I configured the Ext JS 4 grid for editing using the CellEditing plugin. Some cells in the grid have a text editor, and some use a list editor. All this works fine, but I have a little problem with the default behavior of combo box editors.

In principle, when editing a cell with the combined field editor, if you select an item from the drop-down menu, the editing mode in this cell does not end. In other words, the cell does not exit edit mode and becomes marked as dirty. Instead, it will just sit there in edit mode until you go and click elsewhere on the page.

I think it’s unusual that Sencha made this the default behavior for combo box editors, but I won’t complain. I just wanted to know how to select an item with a list and immediately get the item out of edit mode, but I have no idea where to define this behavior.

Here is a small example JS fiddle for playing with:

http://jsfiddle.net/FFwkM/

Code copied below for posterity:

var stateStore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"Alabama"}, {"name":"Alaska"}, {"name":"Arizona"} ] }); var gridStore = Ext.create('Ext.data.Store', { fields:['firstName', 'state'], data:{'items':[ {"firstName":"Lisa", "state":"Alabama"}, {"firstName":"Bart", "state":"Alabama"}, {"firstName":"Homer", "state":"Alabama"}, {"firstName":"Marge", "state":"Arizona"} ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } } }); Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: gridStore, columns: [{ header: 'First Name', dataIndex: 'firstName', flex: 1, editor: 'textfield' }, { header: 'State', dataIndex: 'state', flex: 1, editor: { xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name' } }], selType: 'cellmodel', plugins: [{ ptype: 'cellediting', clicksToEdit: 2 }], height: 150, width: 200, renderTo: Ext.getBody() });
+4
source share
2 answers

One way to achieve the desired behavior is to add a listener for the select event in the combo box, then fire the blur event in the handler. Example:

 Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: gridStore, columns: [{ header: 'First Name', dataIndex: 'firstName', flex: 1, editor: 'textfield' }, { header: 'State', dataIndex: 'state', flex: 1, editor: { xtype: 'combobox', store: stateStore, queryMode: 'local', displayField: 'name', valueField: 'name', listeners: { select: function(combo, recs, opts){ combo.fireEvent('blur'); //<------ } } } }], selType: 'cellmodel', plugins: [{ ptype: 'cellediting', clicksToEdit: 2 }], height: 150, width: 200, renderTo: Ext.getBody() });

Working fork here: http://jsfiddle.net/Zd5QM/

+5
source

Listen to the select event, and then:

  listeners: { select: { fn: function(c, r, eopts) { c.ownerCt.completeEdit(); } } }

http://www.sencha.com/forum/showthread.php?261264-How-to-make-a-grid-cell-immediately-exit-edit-mode-when-a-combo-box-item-is- selected

0
source

More articles:


All Articles