Looks like we can't reproduce the issue or there's a problem in the test case provided.
-
Sencha User
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
-
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.