View Full Version : Navigation between Editable cells of an ExtJs GridPanel (ExtJs 4)

8 Dec 2011, 3:10 AM
I try to convert this to ExtJs4:


But I have many Problems doing this.
(By Example: Missing grd.activeEditor.row)

Is there any example?

Maybe there is an easier method to do this?

Here are my wishes:
* Enter-Key in Downdropped Combo: Select selected Item and Close the Combo (As it is already)
* Enter-Key in Closed Combo: If no value is selected: Dropdown the Combo. Else Move to next editable cell (In last Cell of the row -> Move to first cell of the next row; In last Cell of then last Row of the grid -> AddNew Row and Move to the first cell of the grid)
* When entering the cell: Select all already existing Text, so I can overwrite it.

8 Dec 2011, 4:44 AM
Selecting all Text in the Cell (Maybe not the best solution, but it works):

plugins: [Ext.create('Ext.grid.plugin.CellEditing',
clicksToEdit: 1,
listeners: {
beforeedit: function (e, eOpts) {
Ext.Function.defer(function () {
var el = Ext.FocusManager.focusedCmp;
if (el)
el.focus(true, 100);
}, 250)

Edit: selectOnFocus (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Text-cfg-selectOnFocus) is much better...

8 Dec 2011, 4:58 AM

regarding examples there are 2 different approaches.
cell editing:
row editing:

to select the content of an editor directly look at:

for focussing the next cell, i would listen to the event

which contains the info of the row and column indizes, so you can focus the next cell manually.

8 Dec 2011, 6:45 AM
Hi Tobi,

how to detect, that the enter-key triggered the edit event?

I dont want to select the next cell, if I select another cell by a mouse-click.

Thank you,


9 Dec 2011, 2:09 AM
This helps:

listeners: {
edit: function (editor, e, eOpts) {
if (e.grid.selModel.position.column == e.colIdx && e.grid.selModel.position.row == e.rowIdx)