You found a bug! We've classified it as EXTJS-7112 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    65
    Vote Rating
    3
    oklymenko is on a distinguished road

      0  

    Default Cannot move columns in a grouped grid with a rowexpander

    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:
    Code:
    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.

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

  2. #2
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    65
    Vote Rating
    3
    oklymenko is on a distinguished road

      0  

    Default Possible solution

    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.

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