Hide tree grid header row at runtime?

[mpost]

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

panel.getView().getHeaderCt()setVisible(pressed);

which appears to work, but in the browser console I see a "layout run failed" message for each column.

[scottmartin]

How about this:

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

[mpost]

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:

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.

[scottmartin]

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

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

Scott.

[mpost]

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.

[scottmartin]

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

// 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.

[scottmartin]

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

[mpost]

Thanks, the work around worked perfectly!

[evant]

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.

[mpost]

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.)