Panel header does not honor tpl config
REQUIRED INFORMATION
Ext version tested:
Browser versions tested against:
- Safari 6.0.1
- Chrome 22.0.1229.94
DOCTYPE tested against:
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',
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:
Additional CSS used:
Operating System:
- OS X 10.8.2
- Windows 7 Pro SP1
