Ext version tested:

  • Ext 4.1.1 rev ?

Browser versions tested against:
  • FF15 (firebug 1.9.1 installed)

  • I don't know if this counts as a bug, but it is doesn't follow intuition.
    There are three problems.
    When creating a custom header using the header config in a panel,

  1. if "title" is not defined on the panel, the header is just the config object passed in, even with "title" defined in the header.
  2. header buttons appear to the left of the title (this isn't a bug, I just don't know a work-around)
  3. the title defined on the header will override the one on the panel.

Steps to reproduce the problem:

  • Create a panel with a custom header

initComponent: function() {      
    Ext.apply(this, {
        height: 350,
        width: 400,
        header: {
            xtype: 'header',
            title: "HEADER"
        title: "PANEL", //comment this out
  • Comment out "title" on the panel and refresh.

The result that was expected:
  • A header

The result that occurs instead:
  • The header didn't appear
  • Error: "header.hide is not a function"
  • If you step into the code, you'll see that the header is only an object

Possible fix:
I've bolded where problem #1 is. As you can see, if "title" (the panel's title) is defined, no problem.
However, if you define the title on the header, then it fails the check at &A.
updateHeader: function(force) {
    var me = this, //me is the panel
        header = me.header,
        title = me.title, //The panel's title
        tools =,
        icon = me.icon || me.iconCls,
        vertical = me.headerPosition == 'left' || me.headerPosition == 'right';

    //&A The check fails here...
    if ( (header !== false) && (force || (title || icon) 
                                || (tools && tools.length) 
                                || (me.collapsible && !me.titleCollapse))) {
        if (header && header.isHeader) {
        } else {
            // Apply the header property to the header config
            header = me.header = Ext.widget(Ext.apply({
                xtype       : 'header',
                title       : title,
                titleAlign  : me.titleAlign,
                ... //configs
            }, me.header));
            me.addDocked(header, 0);

            // Reference the Header's tool array.
            // Header injects named references.
    } else if (header) {
        header.hide();  //at this point header is just an object
It doesn't check for the header's title. If it did, it could work.

Additional CSS used:
  • only default ext-all.css
  • custom css (include details)

Operating System:
  • Solaris 10