Cannot move columns in a grouped grid with a rowexpander

[oklymenko]

Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• IE9
• Chrome

Description:

• When a column is moved in a grouped grid with a rowexpander, the header moves, but the data remains in the original location. A JS error is thrown: Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Steps to reproduce the problem:

• configure a grid panel with a grouping feature and a row expander
• group the grid by a column
• move some column by dragging the header

The result that was expected:

• The column is moved to a location where the header was dropped

The result that occurs instead:

• The header is moved but the data remains in the original position
• A red crossed circle icon is shown by the mouse pointer indicating that the column cannot be moved
• A Java Script error is thrown:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 ext-all-debug-w-comments.js:152083
Ext.define.moveColumn
Ext.define.onHeaderMove
Ext.define.onHeaderMoved
Ext.define.onNodeDrop
Ext.define.notifyDrop
Ext.define.onDragDrop
Base.implement.callParent
Ext.define.onDragDrop
Ext.define.fireEvents
(anonymous function)
Ext.define.handleMouseUp
(anonymous function)
Ext.apply.createListenerWrap.wrap

Test Case:
The problem can be reproduced with a standard Sencha groupgrid example (examples\grid\groupgrid.js) by adding a rowexpander configuration, e.g.

        features: [groupingFeature],
        plugins: [{
            ptype: 'rowexpander',
            rowBodyTpl: [
                '<p><b>Name:</b> {name}</p><br>',
                '<p><b>Cuisine:</b> {cuisine}</p>'
            ]
        }],

[oklymenko]

Not sure if it's the best way to do it, but we were able to solve it by overriding the getRowSelector function as shown below.

Ext.override(Ext.grid.feature.RowWrap, {
    getRowSelector: function () {
        return 'tr:has(> ' + this.view.cellSelector + '):not(.x-grid-group-hd)';
    }
});