html - 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/li タグを必要とするようです (とにかく私が試したことから)。

実際の動作を見たい場合は、JS Fiddle をご覧ください: http://jsfiddle.net/MzdqJ/3/

見栄えはよくありませんが、これは CSS スタイルをいじるケースにすぎません。ロジックは少なくとも機能するはずです。