ExtJs XTemplate if语句包含特定的css

Question

有人能举例说明如何在Extjs中使用XTemplate来包含特定的css类吗？

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

编辑: 我有这样的事情

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>'
);

我想用变量中的值替换值5000,所以它不是硬编码的,我该怎么做？

Answer 1

例如:

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/

或者你可以使用一个功能:

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/