Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30
    Vote Rating
    -1
    tavm is an unknown quantity at this point

      -1  

    Default [CLOSED]Grid grouped header, columns not aligned

    [CLOSED]Grid grouped header, columns not aligned


    Found a display error when setting hidden: true in multiple headers. See below, toggle hidden where indicated. If anyone can identify a workaround I would love to see it. Thanks!

    Code:
    var grid = Ext.create('Ext.grid.Panel', {
     store: Ext.create('Ext.data.ArrayStore',{
      fields: [
       {name: 'a'},
       {name: 'b'},
       {name: 'c'},
       {name: 'd'}
      ],
      data: [
       ['a','b','c','d'],
       ['a','b','c','d'],
       ['a','b','c','d']
      ]
     }),
     columns: [{
      text: 'column group',
      columns: [{
       text: 'column a',
       dataIndex: 'a'
      }, {
       text: 'column b',
       hidden: true,
       dataIndex: 'b'
      }, {
       text: 'column c',
       dataIndex: 'c',
       hidden: true//<---TOGGLE ME
      }]
     }, {
      text: 'column d',
      dataIndex: 'd'
     }],
     height: 350,
     width: 600,
     title: 'grid',
     renderTo: 'grid-example'
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,987
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The issue has already been resolved and will be part of 4.0.2. In the interim you can use this override:

    Code:
    Ext.grid.column.Column.override({
        setSize: function(width, height) {
            var me = this,
                headerCt = me.ownerCt,
                ownerHeaderCt = me.getOwnerHeaderCt(),
                siblings,
                len, i,
                oldWidth = me.getWidth(),
                newWidth = 0,
                readyForSizing = true,
                hidden,
                sibling;
    
            if (width !== oldWidth) {
    
                // Bubble size changes upwards to group headers
                if (headerCt.isGroupHeader) {
                    siblings = headerCt.items.items;
                    len = siblings.length;
                    
                    /*
                     * setSize will be called for each column as it's rendered
                     * so we want to wait until all sub columns have been rendered
                     * before we try and calculate the size of the outer container.
                     * We also take into account hidden columns, because they won't
                     * be rendered, but we'll still need to make the calculation.
                     */
                    for (i = 0; i < len; i++) {
                        sibling = siblings[i];
                        hidden = sibling.hidden;
                        if (!sibling.rendered && !hidden) {
                            readyForSizing = false;
                            break;
                        }
                        if (!hidden) {
                            newWidth += (sibling === me) ? width : sibling.getWidth();
                        }
                    }
                    
                    if (readyForSizing) {
                        headerCt.minWidth = newWidth;
                        headerCt.setWidth(newWidth);
                    }
                }
                me.callParent(arguments);
            }
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30
    Vote Rating
    -1
    tavm is an unknown quantity at this point

      0  

    Default


    The override works fine unless forceFit: true is added, then the same error occurs. Not sure if the override is a copy of the changes that are made in 4.0.2.

  4. #4
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30
    Vote Rating
    -1
    tavm is an unknown quantity at this point

      0  

    Default


    Seeing this issue again in 4.0.6.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30
    Vote Rating
    -1
    tavm is an unknown quantity at this point

      0  

    Default


    Error can be recreated in 4.0.6 with original example, do I need to create a new thread or can we reopen this one?

  6. #6
    Sencha Premium Member
    Join Date
    Oct 2007
    Posts
    13
    Vote Rating
    0
    isglass is on a distinguished road

      0  

    Default Same here

    Same here


    Just updated to 4.0.6 and it really messed my grouped headers up. Any fix?

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2011
    Location
    Brussels
    Posts
    10
    Vote Rating
    0
    nikadod is on a distinguished road

      0  

    Default


    Indeed, grouped headers do not seem to be sized properly with forceFit: true.
    Is there any fix on it available?

Thread Participants: 3