Ext version tested:Browser versions tested against:
DOCTYPE tested against:Description:
- FF 26.0 (firebug 1.12.6 installed)
- Chrome 32.0.1700.107
Steps to reproduce the problem:
- When using an editable grid with a rowbody, ExtJS calculates the selected row incorrectly, resulting in incorrect navigation and row highlighting.
The result that was expected:
- Open the attached example and click in the grid cells.
The result that occurs instead:
- The clicked row should be highlighted for editing.
- Tabbing through the cells should correctly move from one row to the next.
Sample demonstration of the problem:
- 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.
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?