Sencha onSelect in colorMenu set background-color of parent button

Question

(Old state, for actual state see EDIT below.)

I want to set the color of the menu button to the selected color from the colorPicker submenu, so users can always see the selection. This is what I have:

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

At this point, Chrome tells me that it "can't set backgroundColor of undefined", so the element seems to be selected correctly, just that it has no "style" property.

EDIT: I got somewhat further. I set ui="plain" and style="background-color:#fc0" on the button in Architect, and the yellow is shown correctly in Chrome. But the following code fails to change the color:

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

No error, nothing, niente, nada. But the element is not colored correctly.

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

How do I change the style of the button?

EDIT2: I should have mentioned that I am preparing the function for use with multiple colorPickers - which is why I chose the relative path (colorpicker.parent) instead of the absolute path (Ext.findById).

Answer 1

Your code is not correct, because:

1. Ext.fly(colorpicker).parent is not attribute but function, see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element.Fly
2. Button is not a parent of colorpicker element

You need to get element of the button and set background color to it. This code should work:

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