How could I dynamically choose a div class with an if-else statement?

Question

I use Ext.XTemplate to show my data in a list and I want to realize a function that when I get a positive number, it show as red and green when negative.

To realize this function, I create two style and I want to pass parameters to dynamically create template like this

currentControl.balanceResultTpl +='<div class="{[{'+AVAILABLE_QTY+'} &gt; 0 ?"summary-qty-style-red":"summary-qty-style-green"]}">{'+AVAILABLE_QTY+'}/{'+QTY+'}</div></div>';

the parameter AVAILABLE_QTY was in store and value will be set when this template get used.

However, the judgement statement seems don't work and I was confused.

I have looked up in sencha docs but found nothing useful for my case.

Thanks!

Answer 1

var tpl = new Ext.XTemplate(
                '<div class="',
                    '<tpl if="AVAILABLE_QTY &gt; 0">',
                        'summary-qty-style-red',
                    '<tpl else>',
                        'summary-qty-style-green',
                    '</tpl>',
                '">{AVAILABLE_QTY}/{QTY}</div>'
            );
console.log(tpl.apply({AVAILABLE_QTY: -1, QTY: 5}));
console.log(tpl.apply({AVAILABLE_QTY: 1, QTY: 5}));

outputs:

<div class="summary-qty-style-green">-1/5</div>
<div class="summary-qty-style-red">1/5</div>