Question

I have some panels (most time grid panels) which a most time configured without a header, meaning header: false. Now I need to toogle the header but I could not find anything concening this. So how can I do this?

Answer 1

As far as I know this is not possible after you have choose to create no header.

You may either consider using a simple component and apply this to the dockedItems along with a appropriate weight. Which may perfectly suitable as long as you don’t need direct access to the tools

or

you define the panel with a header and hide it before the component get shown. I never tried this but it should work. You can receive the header with getHeader()

Here is a working example:

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    width: 100,
    items: [
        {
            xtype: 'button',
            text: 'toggle',
            handler: function(btn) {
                var header = btn.up('panel').getHeader();
                if (header.isVisible())
                    header.hide();
                else
                    header.show();
            }
        }
    ],
    renderTo: Ext.getBody()
});

After some reading I found a way to create a Header afterwards. It can be done with updateHeader(true)

Ext.create('Ext.panel.Panel', {
    title: 'Hello',
    header: false,
    width: 200,
    items: [
        {
            xtype: 'button',
            text: 'toggle',
            handler: function(btn) {
                var panel = btn.up('panel');
                if (Ext.isObject(panel.header) && panel.header.isVisible()){
                    panel.header.hide();
                }else if (panel.header === false){
                    panel.header = true;
                    panel.updateHeader(true);
                }else {
                    panel.header.show();
                }
            }
        }
    ],
    renderTo: Ext.getBody()
});