Hide ExtJS Panel Title

Question

I have a ExtJS panel inside a viewport center region. I want to hide the title of the panel. How can I do it? I'm using xtype config for declaring the panel.

I wonder why, if you don't want to display a title, you set it in the first place... — VoidMain, Nov 24 '11 at 18:39

score 23 · Accepted Answer · answered Jun 09 '10 at 09:23

23

Use either the header or headerAsText config option of panel to hide its title. From ExtJS API documentation:

header : Boolean

true to create the Panel's header element explicitly, false to skip creating it. If a title is set the header will be created automatically, otherwise it will not. If a title is set but header is explicitly set to false, the header will not be rendered.

and

headerAsText : Boolean

true to display the panel title in the header, false to hide it (defaults to true).

answered Jun 09 '10 at 09:23

Tommi

8,550
5
32
51

4

With ExtJS 4.x, header:Boolean is now preventHeader:Boolean. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Panel-cfg-preventHeader – clint Oct 25 '12 at 13:21
For the benefit of Sencha Architect 2 users the 'header' property is the only one available in the standard property list for the Panel widget. It still works in 4.x, however you can just enter preventHeader as a 'custom' property using the property "add" button in Architect. This also works, and will be more future proof. – Glenn Lawrence May 30 '14 at 22:32
`preventHeader` deprecated since version 4.1.0. "Use #header instead." – Vadzim Feb 10 '17 at 19:22

score 4 · Answer 2 · answered Oct 07 '13 at 09:17

4

Use preventHeader property. I checked it and it's worked

See example below

Ext.widget('panel', {
        title: 'Panel header will not be shown',
        preventHeader: true,
        width: 300

    });

answered Oct 07 '13 at 09:17

Gregory Nozik

3,296
3
32
47

score 1 · Answer 3 · answered Jun 28 '18 at 08:44

You can just use the config

Ext.panel.Panel({
    // title: 'Test',   to neglet this
    header:false,
    tools: [{
        type: 'refresh'
    }, {
        type: 'help'
    }],
});

"header:false config documentation"

Hide ExtJS Panel Title

3 Answers3

Linked