带有两个颜色行的 ExtJs 下拉列表

Question

我有 ExtJs 组合下拉列表。当组合为 span

时，我想要双色（奇数为红色，偶数为绿色）行列表

注意：单行有多行（多于一行）

ExtJS 4.2 可以吗？如果是，我该怎么做。

                                {       xtype: 'combobox',
                                        id: 'mycbo',
                                        itemId: 'mycbo',
                                        fieldLabel: 'Name',
                                        name: 'id',
                                        tabIndex: 5,
                                        allowBlank: false,
                                        displayField: 'NAME',
                                        forceSelection: true,
                                        queryMode: 'local',
                                        store: 'STORE',
                                        valueField: 'ID'
                                    },

Answer 1

在此处查看自定义项模板示例 - http://docs.sencha.com/extjs/4.2.0/#!/example/form/combos.html 并查看源代码以及如何使用 listConfig。

您应该能够使用此方法实现出现的列表项的自定义样式

Answer 2

您应该使用 listConfig 配置来更改组合框选择器的行为。（更多信息：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.form.field.ComboBox-cfg-listConfig）

在下面的代码片段中，我将 class 'odd' 和 'even' 设置为组合框中的每个选项。然后我可以用 CSS.

设置样式

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'name',
    valueField: 'abbr',
    listConfig: {
        getInnerTpl: function(displayField) {
           return '<tpl if="xindex%2==0"><div class="odd"></tpl><tpl  if="xindex%2==1"><div class="even"></tpl> {' + displayField + '} </div>';
        }
    },
    renderTo: Ext.getBody()
});

带有两个颜色行的 ExtJs 下拉列表

ExtJs dropdown list with two color rows

extjs

extjs4.2