1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    22
    Vote Rating
    0
    Aurélien Warnon is on a distinguished road

      0  

    Default [4.1 RC 3] - Button 'tpl' config ignored

    [4.1 RC 3] - Button 'tpl' config ignored


    Hi.

    I'm trying the 4.1 RC 3 on our app and I can't get the 'tpl' config from button to work. It just seems to be ignored.

    When I switch to 'renderTpl', the parameter is taken into account, but it does not give the desired effect.

    Here is the code that crates the button and the template:

    Code:
        var newBtn = Ext.create('Ext.button.Button', {
                tpl: this.buttonTemplate(),
                data: buttonConfig,
    
                baseCls: 'buttonAdminMenu',
                width: 245,
                height: 80,
                overCls : overCls,
    //            cellCls: 'adminPanelCell',
                disabled: buttonConfig.disable,
                target: buttonConfig.target
            });
            
            newBtn.on('click', this.onButtonClick, this);
            
            return newBtn;
        },
        
        buttonTemplate: function(){
            if (!this.btnTemplate){
                this.btnTemplate = Ext.create('Ext.Template', [
                   '<table style="height:100%;">',
                           '<tr>',
                               '<td style="width:20%;text-align:center;vertical-align:middle;padding:10px !important">',
                                   '<img src="{icon}" />',
                               '</td>',
                               '<td style="text-align:left;">',
                                   '<div>',
                                       '<span style="font-weight:bold;line-height: 150%">{text}</span><br />{body}',
                                       '<span class="selector"></span>',
                                   '</div>',
                            '</td>',
                           '</tr>',
                       '</table>'
                ]);
                this.btnTemplate.compile();
            }
    Please note that this code is fully working in 4.0.7, and nothing has changed for the 'tpl' config in the new api doc.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you verify this is still a problem in 4.1 GA?
    http://www.sencha.com/blog/ext-js-4-1-final-released/

    Regards,
    Scott.

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,018
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's a rather odd thing to be doing, why are you nesting all that complex markup inside a button?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    22
    Vote Rating
    0
    Aurélien Warnon is on a distinguished road

      0  

    Default


    Because that's the result I'm looking for:

    button.png

    I'll verify in 4.1 GA later on because I'm working on something else at the moment.

    Thanks for all your answers by the way.

  5. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,608
    Vote Rating
    326
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    You can include HTML markup in the text config, that would give a similar result. The easiest way would probably just be to use a br tag in your text. Not sure if this worked in 4.0 but there's been some work on it for 4.1.

    Once you change the markup as much as you have in your tpl it's barely a button anymore. You might as well just write a custom component with an overCls and a click listener.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    22
    Vote Rating
    0
    Aurélien Warnon is on a distinguished road

      0  

    Default


    Well I don't know I thought tpl was there to give the possibility to change the button rendering as you like. That's how I used it before and I don't understand why it should be otherwise in 4.1.

    I tried with the final release and nothing changed.

    You've seen in a previous post what I had before, here is what I have now:

    button.png