Geek asks and answers

ExtJs XTemplate if to enable specific css

Can someone give me an example of how to use XTemplate in Extjs to include a specific css class?

<tpl if="total > 5000">
     yellow css
<tpl else>
   red css
</tpl>

change I have something like this

new Ext.XTemplate('<span style="display:inline-block; margin-right: 730px;"">' + title + ' ({count}) </span>',
    '<span ',
        '<tpl if="priceTotal &gt; 5000"> style="color:black;" class="x-form-item-label x-form-warning"</tpl>',
    '> {priceTotalLabel}:  {priceTotal}',
    '</span>'
);

I want to replace the value 5000 with the value from a variable, so it is not difficult, how can I do it?

+3
source share
1 answer

For instance:

var data = {
    name: 'Don Griffin',
    kids: [
           { name: 'Aubrey', age: 17 }, 
           { name: 'Joshua', age: 13 }, 
           { name: 'Cale', age: 10 }, 
           { name: 'Nikol', age: 5 }, 
           { name: 'Solomon', age: 0 }
          ]
},
tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
    '  <p',
    '<tpl if="age &gt; 1"> class="red"</tpl>',
    '>{name}</p>',
    '</tpl></p>');

tpl.overwrite(Ext.getBody(), data);

http://jsfiddle.net/L2dSX/

Or you can use the function:

tpl = new Ext.XTemplate(
    '<p>Name: {name}</p>',
    '<p>Kids: ',
    '<tpl for="kids">',
    '  <p class="{[this.getKidClass(values)]}">{name}</p>',
    '</tpl></p>',
    {
        getKidClass: function(kid){
            debugger;
            return kid.age > 1 ? 'red' : '';
        }
    }
);

http://jsfiddle.net/Cu85J/

+7
source

More articles:


All Articles