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

【问题标题】：ExtJs dropdown list with two color rows带有两个颜色行的 ExtJs 下拉列表
【发布时间】：2015-03-11 09:27:34
【问题描述】：

我有 ExtJs 组合下拉列表。当组合为跨度时，我想使用两种颜色（奇数为红色，甚至为绿色）行列表

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

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'
                                    },

【问题讨论】：

你能分享一下你到目前为止写的代码吗
我添加了组合框代码
“当组合是跨度时”是什么意思？您只是想将列表项着色为备用颜色吗？
是的。 'span' 表示展开（只需单击列出所有项目后的组合框）

标签： extjs extjs4.2

【解决方案1】：

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

在下面的 sn-p 中，我将 '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()
});

【讨论】：

【解决方案2】：

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

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

【讨论】：