You found a bug! We've classified it as EXTJS-9238 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default Hide tree grid header row at runtime?

    Hide tree grid header row at runtime?


    How do you toggle the visibility of a tree grid's header row at runtime? I'm trying to toggle the visibility based on a button toggle event. I've tried

    Code:
    panel.getView().getHeaderCt()setVisible(pressed);
    which appears to work, but in the browser console I see a "layout run failed" message for each column.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    How about this:

    Code:
    Ext.create('Ext.data.Store', {
        storeId : 'simpsonsStore',
        fields  : ['name', 'email', 'change'],
        data    : {'items' : [
            { 'name' : 'Lisa',  'email' : 'lisa@simpsons.com',  'change' : 100  },
            { 'name' : 'Bart',  'email' : 'bart@simpsons.com',  'change' : -20  },
            { 'name' : 'Homer', 'email' : 'home@simpsons.com',  'change' : 23   },
            { 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11  }
        ]},
        proxy   : {
            type   : 'memory',
            reader : {
                type : 'json',
                root : 'items'
            }
        }
    });
    
    var grid = Ext.create('Ext.grid.Panel', {
        title      : 'Simpsons',
        store      : Ext.data.StoreManager.lookup('simpsonsStore'),
        columns    : [
            { header : 'Name', dataIndex : 'name' },
            { header : 'Email', dataIndex : 'email', flex : 1 },
            { header : 'Change', dataIndex : 'change' }
        ],
        height     : 200,
        width      : 400,
        renderTo   : Ext.getBody()
    });
    
    grid.headerCt.setVisible(false);
    Scott

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Nope, that still gives a 'Layout run failed' message. I see that I left out an important detail though: when I'm toggling the header off, I'm also hiding two of my three columns (the first column is always visible). Here's my toggle handler:

    Code:
    onToggle: function (button, pressed, eOpts)
    {
        var panel = button.up('treepanel');
        panel.down('#col2').setVisible(pressed);
        panel.down('#col3').setVisible(pressed);
    
    
        panel.getView().getHeaderCt().setVisible(pressed);   // layout run failed
    },
    I've tried moving the header visibility toggle before the column visibility toggle, but I still get a layout run failed.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please have a look:
    http://jsfiddle.net/6vJBR/

    What version of Ext are you using? Perhaps try an clear the browser cache

    Scott.

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    I'm using Ext 4.1.1a. It turns out this message only happens when using ext-dev.js. I've updated your fiddle appropriately: http://jsfiddle.net/FSKJq/

    I'm seeing this error in Firefox 19.0.2, Safari 6.0.3, and Chrome 25.0.1364.172 on OS X 10.8.3. Should I be concerned about this error? I'm guessing that ext-dev.js performs additional logging and checking that ext-all.js skips for performance reasons.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    I have moved this to the bugs forum .. please use the following:

    Code:
    // taken from hideHeaders approach
    grid.getView().getHeaderCt().setHeight(btn.pressed ? 0 : null);
    I am going to create a bug report to correct this issue. The issue is that that the table needs the header to calculate column widths. We are going to make allowances to correct this.

    Scott.

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    Thanks, the work around worked perfectly!

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,017
    Vote Rating
    650
    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


    You can't hide the headers because they are used to give the sizes to the columns. As Scott said, the height is set to 0, so that they will still layout and attain a width.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default


    If calling setVisible(false) on the header container causes the layout to break, then maybe the header container should override the inherited implementation of setVisible so it does the right thing (setting height to 0). That way the framework makes sense and the same call I can make everywhere else to show/hide components works on this component as well -- instead of blowing up for a non-obvious reason. (In software engineering circles, we refer to this type of API design as The Pit of Success. Right now HeaderContainer.setVisible() is circling The Pit of Despair.)

Thread Participants: 2