Panel header does not honor tpl config

[mpost]

REQUIRED INFORMATION
Ext 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 change how a panel header is rendered. According to the documentation, I should be able to specify a tpl config. Unfortunately, the header class does not honor it and instead favors the private headingTpl property.

Steps to reproduce the problem:

• Create a panel.
• Give it a header config.
• In the header config, provide a tpl config that prints "foo" before and after the title.

The result that was expected:

• The panel header displays as "foo panel 1 foo".

The result that occurs instead:

• The panel header displays as just "panel 1".

Test Case:

Ext.create('Ext.Panel', {
    title: 'Example',
    width: 300,
    height: 400,
    renderTo: Ext.getBody(),
    defaults: {
        height: 100,
        width: 300
    },
    items: [
        {
        xtype: 'panel',
        region: 'center',
        title: 'panel 1',
        html: 'panel 1',
        collapsible: true,
        header: {
            // change to headingTpl to make it work
            tpl: '<span id="{id}-textEl" class="{cls}-text {cls}-text-{ui}">foo {title} foo</span>'
        }}
    ]
});​ 

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

Debugging already done:

• Changing the header config to use headingTpl instead of tpl works. However, headingTpl is listed as a private member.

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• OS X 10.8.2
• Windows 7 Pro SP1