Question

这是我坚持的事情：

Ext.define('Application.view.phone.AppScreen', {
extend: 'Ext.navigation.View',
//  extend: 'Ext.Container',
xtype: 'appscreen',
id: 'appscreen',
alias: 'widget.appscreen',
config: {

    items: [{
        xtype: 'container',
        title: 'My View',
        layout: {
            type: 'fit'
        },
        items:[{
            html:'phone'
        },

        {
            xtype:'list',
            id:'AccountSummary',
            name:'AccountSummary',
            onItemDisclosure:true,
            store:{
                fields: ['Label', 'Amount'],
                data: [
                {
                    "Label":"Order",
                    "Amount": "18,275"
                },

                {
                    "Label":"Shipment",
                    "Amount": "25,255"
                },

                {
                    "Label":"Invoices",
                    "Amount": "11,125"
                }
                ]
            }, 

        itemTpl: new Ext.XTemplate('{Label}<tpl if="Label==Order"><div class="meter"><span style="width: 60%"></span></div></tpl><tpl if="Label==Shipment"><div class="meter1"><span style="width: 60%"></span></div></tpl><br>$ {Amount} Cash')

        }]
    }]
}

}）;

我需要动态更改css，例如，如果标签是订单我需要应用css表，类似meter1 for Shipment。有人可以帮我这个吗？

Answer 1

这应该相当简单，看看下面我正在进行的TPL考试：

new Ext.Container({
    fullscreen : true,
    tpl        : '<tpl if="foo == &quot;bar&quot;">Is Bar</tpl>',
    data       : {
        foo : 'bar'
    }
});

我认为您需要在检查字符串时向您的语句添加编码引号，请参阅下面的更新代码：

itemTpl: new Ext.XTemplate('{Label}<tpl if="Label == &quot;Order&quot;"><div class="meter"><span style="width: 60%"></span></div></tpl><tpl if="Label == &quot;Shipment&quot;"><div class="meter1"><span style="width: 60%"></span></div></tpl><br>$ {Amount} Cash')

在列表itemTpl中的div内动态更改css

1 个答案: