CODEWITHSUNDEEP
javascriptextjssencha-touch
inane
inane

Reputation: 648

Sencha templates (tpl) with special conditions, hidden or not hidden

I am having problems with tpl in Sencha Touch. From the backend I am receiving hidden (false or true) depending of a customizing.

Can I control this condition among "if and else" instructions?

Code: 

tpl: new Ext.XTemplate([
            '<div class="cart-status-toolbar">' +
            '<tpl if="messagetype == \'E\'">' +
            '<div class="message {messagetype}">{messagetext}</div>' +
            '</tpl>' +
            '<tpl if="messagetype == \'S\'">' +
            '<div class="label">{[C.Text.getText("SC_ORDER_TOTAL_NET_VALUE")]} </div>' +
            '<div class="total-value">{totalnetvalue}</div>' +
            '<div class="indicator {lightstatus}">{lightvalue}</div>' +
            '<tpl if="ordernetamount" == false>' +
            '<div class="label">{[C.Text.getText("SC_ORDER_A_TOTAL_NET_AMOUNT")]} </div>' +
            '<div class="total-value">{netamount}</div>' +
            '<div class="indicator {lightstatus}">{lightvalue}</div>' +
            '</tpl>' +
            '</tpl>' +
            '</div>'
    ])

And the configuration if it is hidden or not from json

 "priceanalysis": [
        {
            "propertyname": "name",
            "propertyvalue": "ordernetamount",
            "hidden": "false"
        }
    ]

Thanks!

Upvotes: 0

Views: 1421

Answers (1)

Allan Jikamu
Allan Jikamu

Reputation: 341

You should take a look more closer on Sencha's Ext.Template. Sencha's tpl system is actually one of the best I think on representing data from your store or with just a single model.

Here's a sample of Xtemplate with conditional statement.

Ext.define('MyProject.view.Navigation', {
    extend: 'Ext.dataview.List',
    xtype: 'navigation',
    requires: ['Ext.data.Store'],
    config: {
        store: 'NaviLinks',
        cls: 'nav-list',
        //itemTpl: '{additional_text} {fa_icon} {name}',
        itemTpl: new Ext.XTemplate([
            '<div style="width:30px;float:left;">{icon}</div> {name}',
            '<div style="clear:both"></div>',
            '<tpl if="additional_text">',
            '<div style="margin-left:30px;font-weight:bold;font-size:14px;color:#aaa">[{additional_text}]</div>',
            '</tpl>'
        ])
    },
    initialize: function() {
        this.callParent();
    }
});

Upvotes: 2

Related Questions