Results 1 to 2 of 2

Thread: Panel header does not honor tpl config

Hybrid View

Previous Post Previous Post   Next Post Next Post
    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
    6
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •