patentul patentul - 4 months ago 17
CSS Question

ExtJs XTemplate if statement to include a 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>


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

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/