ExtJs XTemplate if statement to include a specific css

css, extjs

Solution

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/

Problem

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?

Original source