在列表跨度動態改變CSS一個div內itemTpl

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的Shipment.Can某人請在此幫助我？

Answer 1

這應該是相當簡單的，看看我的工作TPL examle如下：

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')