ExtJs XTemplate if statement to include a specific css

Question

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>

edit: 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 a value from a variable, so taht it's not hardcoded, how can I do this?

Answer 1

For example:

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 a 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/