Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    83
    Vote Rating
    5
    mpost is on a distinguished road

      0  

    Default Panel header does not honor tpl config

    Panel header does not honor tpl config


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.