Empty panel header title is always rendered

[mpost]

REQUIRED INFORMATIONExt version tested:

• Ext 4.1.1
• Ext 4.1.1 rev a

Browser versions tested against:

• Safari 6.0.1
• Chrome 22.0.1229.94

DOCTYPE tested against:

• HTML5

Description:

• I want to add some centered text after the title in a panel header.
• Panel headers that use an items config always render the items before the title. Thus I need to put the title in the items config and omit the header's title config.
• Ext is always rendering an empty header text element which throws off the layout.
• This entire scenario makes it next to impossible to customize a panel header without copying private framework code.

Steps to reproduce the problem:

• Create a panel. Omit the title config.
• Give it a header config. Omit the title config here as well.
• In the header config, add a container to the items collection that represents the manually managed title.
• Add another container to the items collection. Add css to center the text. Give it a flex of 1.

The result that was expected:

• The container with the centered text is rendered in the center of the header.

The result that occurs instead:

• The container with the centered text is rendered offset from the center due to the presence of an empty header text element.

Test Case:

​Ext.create('Ext.Panel', {
    title: 'Example',
    width: 300,
    height: 400,
    renderTo: Ext.getBody(),
    layout: 'border',
    defaults: {
        height: 100,
        width: 300
    },
    items: [
        {
        xtype: 'panel',
        region: 'center',
        //title: 'panel 1',
        html: 'panel 1',
        collapsible: true,
        header: {
            defaults: {
                border: 1,
                style: {
                    borderColor: 'red',
                    borderStyle: 'solid'
                }
            },
            items: [
                {
                xtype: 'container',
                html: 'title',
                cls: 'x-panel-header-text-container'},
            {
                xtype: 'container',
                html: '<p style="text-align:center">centered text</p>',
                flex: 1}
            ]
        }}
    ]
});​​ 

HELPFUL INFORMATION
See this URL for live test case:
http://jsfiddle.net/k2puA/2/

Debugging already done:

• If the title config is not specified, the Header class sets it to a non-breaking space.
• This non-breaking space is then rendered with a flex of 1, after the items collection.
• Specifying various css classes on the manually managed title in the items collection seems to have no effect. The header class always wants to include the non-breaking space and then render it.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• OS X 10.8.2
• Windows 7 Pro SP1

[mitchellsimoens]

Why not use titleAlign to center some text?

Ext.create('Ext.panel.Panel', {
    title    : 'Example',
    width    : 300,
    height   : 400,
    renderTo : Ext.getBody(),
    layout   : 'border',
    defaults : {
        height : 100,
        width  : 300
    },
    items    : [
        {
            xtype       : 'panel',
            region      : 'center',
            title       : 'panel 1',
            titleAlign  : 'center',
            html        : 'panel 1',
            collapsible : true,
            header      : {
                defaults : {
                    border : 1,
                    style  : {
                        borderColor : 'red',
                        borderStyle : 'solid'
                    }
                },
                items    : [
                    {
                        xtype : 'container',
                        html  : 'title',
                        cls   : 'x-panel-header-text-container'
                    }
                ]
            }}
    ]
});

[mpost]

Why not use titleAlign to center some text?

Two reasons:

1. For the case where I want to center some text, I want the title to be left justified. You example is the opposite: title is centered, other text is left justified.
2. This bug also affects cases where you want to right justify text. For example, if I want a left justified title, but want to add a right justified text. The text would need to be specified in the items config, but then it would be rendered before the title. Thus the title also has to be specified in the items config, but then the empty title automatically kicks in. This makes the right justified text appear to be centered. Example: http://jsfiddle.net/KQTfP/2/

[evant]

The panel header is a fairly unique component, similar the paging toolbar. It can accept items, but by default they are mostly configured externally by another component. As such, it makes it difficult to provide a reasonable level of flexibility without adding significant complication.

As such, your best bet is to override initComponent and manipulate the items collection:

Ext.define('MyHeader', {
    extend: 'Ext.panel.Header',

    initComponent: function(){
        this.callParent(arguments);
        this.remove(this.titleCmp);
        delete this.titleCmp;
        // have at it!
    }
});