extjs - colorMenu 中的 Sencha onSelect 设置父按钮的背景颜色

Question

(旧状态，实际状态见下面的编辑。)

我想将菜单按钮的颜色设置为从 colorPicker 子菜单中选择的颜色，以便用户始终可以看到选择。这就是我所拥有的:

onColorPicker1Select: function(colorpicker, color, e0pts) {
    Ext.fly(colorpicker).parent.style.backgroundColor=color;
}

此时，Chrome 告诉我它“无法设置未定义的背景颜色”，因此该元素似乎被正确选择，只是它没有“样式”属性。

编辑:我有点进一步。我在 Architect 中的按钮上设置了 ui="plain"和 style="background-color:#fc0"，黄色在 Chrome 中正确显示。但是以下代码无法更改颜色:

onColorPicker1Select: function(colorpicker, color, e0pts) {
    Ext.fly(colorpicker).parent.style="background-color:"+color;
}

没有错误，没有，niente，nada。但是元素颜色不正确。

{
    xtype: 'button',
    itemId: 'color1',
    style: 'background-color:#fc0;',
    text: '1. Farbe',
    menu: {
        xtype: 'colormenu',
        listeners: {
            select: {
                fn: me.onColorPicker1Select,
                scope: me
            }
        }
    }
}

如何更改按钮的样式？

EDIT2:我应该提到我正在准备与多个 colorPickers 一起使用的函数 - 这就是我选择相对路径(colorpicker.parent)而不是绝对路径(Ext.findById)的原因。

Answer 1

您的代码不正确，因为:

Ext.fly(colorpicker).parent不是属性而是函数，见 http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element.Fly

按钮不是 colorpicker 的父级元素

您需要获取按钮的元素并为其设置背景颜色。此代码应该工作:

  onColorPicker1Select: function(colorpicker, color, e0pts) {
      var button = colorpicker.up('button');
      button.getEl().setStyle('background-color', '#' + color);
  }