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 样式的一个例子。逻辑至少应该有效。