Thank you for reporting this bug. We will make it our priority to review this report.
Ext JS Premium Member
Incorrect behaviour using an editable grid with the rowbody feature enabled
Ext version tested:
Browser versions tested against:
- FF 26.0 (firebug 1.12.6 installed)
- Chrome 32.0.1700.107
DOCTYPE tested against:
- When using an editable grid with a rowbody, ExtJS calculates the selected row incorrectly, resulting in incorrect navigation and row highlighting.
Steps to reproduce the problem:
- Open the attached example and click in the grid cells.
The result that was expected:
- The clicked row should be highlighted for editing.
- Tabbing through the cells should correctly move from one row to the next.
The result that occurs instead:
- Other than on the first row, the wrong row is highlighted for editing.
- When tabbing through the cells, the edit focus incorrectly jumps to the wrong rows.
Sample demonstration of the problem:
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:
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:
returns (row index * 2); <= wrong
returns new Ext.grid.CellContext object after call to setPosition()
I have put a simple example of this online, which can be found here:
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);
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.
Thanks for the report and test case. I was able to reproduce the behavior you described, but it was fixed in 4.2.2, with which your test case behaves as expected.
Ext JS Premium Member
Many thanks for your quick response.
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.)
An example using ExtJS 4.2.2 can be found here:
Do you know whether this can be fixed or worked around?