Results 1 to 7 of 7

Thread: [CLOSED]Grid grouped header, columns not aligned

    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

    Default [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 Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,247

    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);
            }
        }
    });
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30

    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

    Default

    Seeing this issue again in 4.0.6.

  5. #5
    Ext JS Premium Member
    Join Date
    Aug 2009
    Posts
    30

    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
    16

    Default 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

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •