PDA

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



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

http://www.rahulsingla.com/blog/2010/02/navigation-between-editable-cells-of-an-extjs-gridpanel

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.

herzog
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...

tobiu
8 Dec 2011, 4:58 AM
hello,

regarding examples there are 2 different approaches.
cell editing:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/cell-editing.html
row editing:
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/row-editing.html

to select the content of an editor directly look at:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.Text-cfg-selectOnFocus

for focussing the next cell, i would listen to the event
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.plugin.CellEditing-event-edit

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

herzog
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,

Christian

herzog
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)
.
..
...