Sencha touch - Ext.XTemplate if/else not working

Question

Hi I am new to Sencha touch. I have problem displaying data in Ext.dataview.List with itemTpl. This how I am setting itemTpl in config

itemTpl: new Ext.XTemplate(

            '<div class="featureImageHolder"><img class="featureImage" src="{itemImage}" alt="{itemName}" /></div>',

            '<span class="item">',
                '<h3 class="saleName">{itemName}</h3>',
                '<span class="priceOptions">',
                '<tpl for="prices">',
                    '<span class="priceOptionReg">',
                        '<tpl if="priceOptionDesc">{priceOptionDesc}</tpl> ',
                        '<tpl if="priceOptionReg">{priceOptionReg}</tpl>  ',
                        '<tpl if="priceReg">${priceReg}</tpl>  ',
                        '<tpl if="priceRegSuffix">{priceRegSuffix}</tpl> ',
                    '</span>',
                    '<tpl if="priceSale"><span class="priceOptionSale">',
                        '<tpl if="priceSaleDesc">{priceSaleDesc}</tpl> ',
                        '<tpl if="priceOptionSale">{priceOptionSale}</tpl>  ',
                        '<tpl if="priceSale">${priceSale}</tpl>',
                        '<tpl if="priceSaleSuffix">{priceSaleSuffix}</tpl> ',
                    '</span></tpl>',
                '</tpl>',
                '</span>',
            '</span>',
            '<div class="clear"></div>'
        ),

It is working perfectly and displaying list of products. But now I need change CSS class for first record only because it is an Ad banner. So I am using following if statement:

itemTpl: new Ext.XTemplate(
                '<tpl if={isBanner} === true>',
                    '<div class="myTestClass">{itemImage}</div>',

                '<tpl elseif={isBanner} === false>',
                    '<div class="featureImageHolder"><img class="featureImage" src="{itemImage}" alt="{itemName}" /></div>',
                '</tpl>',


                '<span class="item">',
                    '<h3 class="saleName">{itemName}</h3>',
                    '<span class="priceOptions">',
                    '<tpl for="prices">',
                        '<span class="priceOptionReg">',
                            '<tpl if="priceOptionDesc">{priceOptionDesc}</tpl> ',
                            '<tpl if="priceOptionReg">{priceOptionReg}</tpl>  ',
                            '<tpl if="priceReg">${priceReg}</tpl>  ',
                            '<tpl if="priceRegSuffix">{priceRegSuffix}</tpl> ',
                        '</span>',
                        '<tpl if="priceSale"><span class="priceOptionSale">',
                            '<tpl if="priceSaleDesc">{priceSaleDesc}</tpl> ',
                            '<tpl if="priceOptionSale">{priceOptionSale}</tpl>  ',
                            '<tpl if="priceSale">${priceSale}</tpl>',
                            '<tpl if="priceSaleSuffix">{priceSaleSuffix}</tpl> ',
                        '</span></tpl>',
                    '</tpl>',
                    '</span>',
                '</span>',
                '<div class="clear"></div>'
            ),

The problem is if/elseif are both executed for each record. If I use if/else it gives error in console.

Uncaught SyntaxError: Unexpected token else 

You can see I have used

'<tpl if={isBanner} === true>',

I have also used

'<tpl if={isBanner} == true>',

I have also tried many varients like comparing numeric values instead of Boolean and using > or <. Also tried comparing String values. But with all variations, the if/elseif are both executing and if/else gives error.

Any help is appreciated, I just need to change class for first record.

Answer 1

if isBanner is boolean, this will work

'<tpl if="isBanner">',
     '<div class="myTestClass">{itemImage}</div>',
'<tpl else>',
     '<div class="featureImageHolder"><img class="featureImage" src="{itemImage}" alt="{itemName}" /></div>',
'</tpl>',