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:
PHP Code:
Ext.create('Ext.Panel', {
    
title'Example',
    
width300,
    
height400,
    
renderToExt.getBody(),
    
defaults: {
        
height100,
        
width300
    
},
    
items: [
        {
        
xtype'panel',
        
region'center',
        
title'panel 1',
        
html'panel 1',
        
collapsibletrue,
        
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