Custom header problems

[castitas]

REQUIRED INFORMATION
Ext version tested:

• Ext 4.1.1 rev ?

Browser versions tested against:

• FF15 (firebug 1.9.1 installed)

Description:

• 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

HELPFUL INFORMATION
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 = me.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) {
            header.show();
        } 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.
            me.tools = header.tools;
        }
        me.initHeaderAria();
    } 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

[mitchellsimoens]

Couple thoughts...

You technically should only specify title either on the panel or on the header config not both. If anything it will save a line of code.

How does the framework know which you actually want to use? IMO the title in the header config should be used where as you are saying the one on the panel should be used.

I do agree that this is a bug:

Ext.define('MyPanel', {
    extend : 'Ext.panel.Panel',
    xtype  : 'mypanel',

    initComponent : function() {
        Ext.apply(this, {
            header : {
                xtype : 'header',
                title : 'HEADER'
            }
        });

        this.callParent();
    }
});

I'm not sure what you mean by: "header buttons appear to the left of the title (this isn't a bug, I just don't know a work-around)"