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

[mitchellsimoens]

tpl is used for a different purpose. If you use the update method and pass in an object then the tpl config will work. headerTpl is used as the renderTpl for the title component. So tpl is on the Ext.panel.Header and headerTpl is used on the Ext.Component that is the title.