Question

I have a extjs tabpanel and a toolbar defined like this.

tbar : {
{
xtype:'box',
tpl:[
'<table><tr><td>',
'<b>Total Prelim Shares:</b> ',
'</td><tpl if="totalPrelimShares < 0" ><td width="30" style = "color:red">',
'{totalPrelimShares}',
'</td></tpl><td width="10">',
'<span class="xtb-sep"></span>',
'</td><td>',
'<b>Total Prelim Gross Amount:</b>',
'</td><td width="70">',
'{totalPrelimGrossAmount}',
'</td><td>',
'<b>Total Prelim Net Amount:</b>',
'</td><td width="70">',
'{totalPrelimNetAmount}',
'</td></tr><table>'             

],
ref:'../ipTotalBar',
data:{totalPrelimShares :'0'}
}
}

I call it like this:

var obj = {totalPrelimShares :  -10,totalPrelimNetAmount:20,totalPrelimGrossAmount : 30 };
this.ipTotalBar.update(obj);

No errors, but the {totalPrelimShares} does not show up. When I remove the tpl if="totalPrelimShares < 0" >, it works fine.

Answer 1

The problem that you’re experiencing may be because the XTemplate does not know what totalPrelimShares is. In the examples in the XTemplate documentation, whenever using a variable passed into the template configuration (like totalPrelimShares, in your case), it is always referred to using this.*. For example:

<tpl if="this.totalPrelimShares < 0">

If that doesn’t work, you can also try using the inline operators {[ ... ]} as defined in the documentation:

<tpl if="{[totalPrelimShares]} < 0">