We are currently partway through the process of upgrading a system from ExtJS 3.2.2 to ExtJS 4.2.1. Mostly everything is going very well, but we've run into some unexpected behaviour using an editable grid with the rowbody feature switched on.
The problem arises because for a grid with the 'rowbody' feature added, Ext4 inserts additional TR elements after each TR element for a grid row.
This causes a mistake in two areas:
1 - The walkRows() method of Ext.view.Table returns a target row index that is twice what it should be, having counted rowbody TR elements along with normal grid row TR elements. The code path taken to reach this is as follows:
returns (row index * 2); <= wrong
returns new Ext.grid.CellContext object after call to setPosition()
2 - The indexOf() method of Ext.view.NodeCache returns a row index twice what it should be, also having counted rowbody TR elements along with normal grid row TR elements. The code path here is:
calls Ext.grid.plugin.CellEditing::startEditByPosition(record, columnHeader)
calls Ext.grid.plugin.CellEditing::startEdit(record, columnHeader)
calls Ext.grid.plugin.Editing::startEdit(record, columnHeader)
calls getEditingContext(record, columnHeader)
returns dom node
elements has (rows * 2) items
returns (node index * 2); <= wrong
returns (node index * 2);
sets rowIdx to (node index * 2);
I have put a simple example of this online, which can be found here:
This contains a grid with two editable columns and a rowbody. The grid is fine when an editable cell in the first row has the focus, but when you click a cell in a subsequent row, the row highlight appears at the wrong position. More significantly, tabbing between cells is very broken: tabbing out from row 0 results in us arriving at row 2, and then tabbing again puts us into row 4, then row 8.
I wanted to raise this in the hope that it might be fixed in a future release of ExtJS.
In the meantime, can anyone suggest a way that we might work around this issue?
Last edited by AdamDawes; 6 Feb 2014 at 6:17 AM.
Reason: Added further information.
I tried again using the ExtJS4.2.2 code and can confirm that clicking into the editable cells does indeed now cause the correct row to highlight, which is great.
However tabbing through the cells still seems to be broken: tabbing such that the focus arrives anywhere other than in the first row causes the focus to arrive in the wrong location, just as before. (Tested in IE10, Firefox 26, Chrome 32.)