Extjs ComboBox - Modifier le CSS?

Question

J'ai besoin d'afficher une liste déroulante (codée dans Extjs ComboBox), mais cela devrait ressembler à une table comme indiqué dans l'image ci-dessous. Est-ce que cela peut être fait en modifiant ou en écrasant le code CSS?

J'apprécie l'aide.

Answer 1

il est impossible en utilisant CSS seul, mais vous pouvez utiliser XTemplates faire quelque chose de similaire.

Je l'ai fait comme ceci:

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

Vraiment, il devrait être fait en utilisant une table réelle mais il semble (Ce que j'ai essayé quand même) que le ComboBox a besoin des balises ul/li afin de fonctionner correctement.

Si vous voulez le voir en action, voici un JS Fiddle: http://jsfiddle.net/MzdqJ/3/

Il ne semble pas grand mais cela ne devrait juste être un cas de jouer avec les styles CSS. La logique devrait fonctionner au moins.