无法在 Ext 3.2.1 中更改组合框背景颜色答案

【问题标题】：Can't change combobox background color at Ext 3.2.1无法在 Ext 3.2.1 中更改组合框背景颜色
【发布时间】：2018-04-22 07:40:42
【问题描述】：

嘿，我正在尝试创建一个颜色选择器，我想在用户选择他想要的颜色时更改组合框背景。

我正在调用这个函数：setStyle()，来设置组合框样式，但是我收到了这个错误：

Uncaught TypeError: Ext.getCmp(...).setStyle is not a function
    at Object.fn (...js?v=1510223645:210)
    at EXTUTIL.Event.fire (ext-all.js?v=1510223645:1735)
    at J.fireEvent (ext-all.js?v=1510223645:1484)
    at J.onSelect (ext-all.js?v=1510223645:39222)
    at J.onViewClick (ext-all.js?v=1510223645:39309)
    at EXTUTIL.Event.fire (ext-all.js?v=1510223645:1735)
    at J.fireEvent (ext-all.js?v=1510223645:1484)
    at J.onClick (ext-all.js?v=1510223645:27169)
    at HTMLDivElement.h (ext-all.js?v=1510223645:2158)

我的代码：

xtype: 'combo',
    width: 340,
    id: 'test',
    store: new Ext.data.SimpleStore({
        fields: ['text', 'color'],
        data: [
            ['Red', '#db4e4e'],
            ['Green', '#89b76e'],
            ['Blue', '#3c8787'],
        ]
    }),
    valueField: 'color',
    mode: 'local',
    editable: false,
    tpl: '<tpl for="."><div class="x-combo-list-item" style="height: 20px; background-color:{color};"></div></tpl>',
    listeners: {
        select: {
            fn: function(combo, value) {
                Ext.getCmp('test').setStyle('background', value);
            }
        },
        scope: this
    }

我已经试过了：

this.setFieldStyle('background:#FF0000');

但它不起作用。

我该如何解决这个问题？

谢谢。

【问题讨论】：

标签： extjs combobox

【解决方案1】：

我该如何解决这个问题？

你可以这样解决

1) Ext.get() 通过id 返回一个组件。有关更多详细信息，请参阅Ext.util.MixedCollection.get。

Ext.get('ext-gen12').setStyle({
    background:'red'
})

2) Ext.fly() 获取全局共享的享元元素，传入的节点作为活动元素。不要存储对此元素的引用 - dom 节点可以被其他代码覆盖。

Ext.fly('ext-gen12').setStyle({
   background:'yellow'
})

注意 ext-gen12 是您的combobox 或任何其他component id 的id。你也可以在这里传递dom 元素。

希望这能帮助您解决问题。

【讨论】：