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

[Aurélien Warnon]

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:

    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.

[scottmartin]

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.

[evant]

It's a rather odd thing to be doing, why are you nesting all that complex markup inside a button?

[Aurélien Warnon]

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.

[skirtle]

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.

[Aurélien Warnon]

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