Using items config in panel header places items before title

[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:

• Using a header config in a panel, I want to insert additional items into the header. However, items are always inserted before the title element.
• Due to this other bug, it is not possible to omit the title config and create it as a member of the items collection.

Steps to reproduce the problem:

• Create a panel.
• Give it a header config.
• In the header config, add a container to the items collection.

The result that was expected:

• Items in the items config appear after the title.

The result that occurs instead:

• Items appeared before the title.

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: '<p style="text-align:center">centered text</p>',
                flex: 1}
            ]
        }}
    ]
});​ 

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

Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• OS X 10.8.2
• Windows 7 Pro SP1