Extjs ComboBox - 更改CSS？

Question

我需要顯示一個下拉列表（以Extjs ComboBox編碼），但它應該看起來像下表所示，如下圖所示。 這可以通過修改或覆蓋CSS來完成嗎？

我很感激幫助。

Answer 1

這是不可能單獨使用CSS，但你可以使用XTemplates做類似的事情。

我已經做了這樣的：

Ext.onReady(function(){ 

     var states = Ext.create('Ext.data.Store', { 
      fields: ['class', 'desc', 'policy', 'ac'], 
      data : [ 
       {"class":"1", "desc":"Medical Bills", "policy":"41000", "ac":"1"}, 
       {"class":"12", "desc":"One Time Payments", "policy":"41000", "ac":"1"}, 
       {"class":"3", "desc":"Treatment", "policy":"41000", "ac":"1"} 
      ] 
     }); 

     // Create the combo box, attached to the states data store 
    Ext.create('Ext.form.ComboBox', { 
     fieldLabel: 'Class Description', 
     width: 400, 
     store: states, 
     queryMode: 'local', 
     valueField: 'class', 
     displayField: 'desc', 
     renderTo: Ext.getBody(), 
     listConfig: { 
      minWidth: 500, 
      tpl: new Ext.XTemplate(
       '<div class="HeaderDiv" style="width: 75px;">Class</div>' + 
       '<div class="HeaderDiv" style="width: 300px;">Description</div>' + 
       '<div class="HeaderDiv" style="width: 95px;">Policy</div>'+ 
       '<div class="HeaderDiv" style="width: 20px;">A/C</div>' + 
       '<ul style="list-style-type: none;"><tpl for=".">' + 
       '<li role="option" class="x-boundlist-item" style="list-style-type: none;"> ' + 
        '<div class="InnerDiv" style="width: 75px;">{class}</div>' + 
        '<div class="InnerDiv" style="width: 300px;">{desc}</div>' + 
        '<div class="InnerDiv" style="width: 95px;">{policy}</div>' + 
        '<div class="InnerDiv" style="width: 20px;">{ac}</div>' + 
       '</li></tpl></ul>' 
      )  
     } 
    }); 
}); 

真的，就應該用實際的表來完成，但它似乎（據我反正試過）對ComboBox需要UL /李標籤爲了正確工作。

如果你想看到它在行動，這裏有一個JS小提琴：http://jsfiddle.net/MzdqJ/3/

它看起來不很大，但應該只是與CSS樣式玩耍的情形。邏輯至少應該起作用。