Applying a hover effect to a Container in ExtJs

Question

Why is this so hard? I can't use CSS or I would be done with this already. I have a 'button' made up of a container, an image, and a label, and I got the click event working fine for the container. However - doing something as simple as changing the background color on hover has me hating ExtJs right now, there HAS to be a simpler way of doing this.

This is what I've got so far:

Ext.create('Ext.container.Container', {
                 layout: 'hbox',
                 style: { backgroundColor: '#ddd', margin: "5px 0px 5px 5px", padding: "3px", width: "150px", fontSize: "8pt" },
                 listeners: {
                    render: function (c) {
                       c.el.on('click', function () { alert('Downloading Report'); });

                       c.el.on('mouseover', function () {
                          //alert("mouseover");
                          Ext.apply(this, { style: { backgroundColor: '#aaa'} });
                       }
                       );

                       c.el.on('mouseout', function () {
                          //alert("mouseout");
                          Ext.apply(this, { style: { backgroundColor: '#ddd'} });
                       }
                       );
                    },
                    scope: this
                 },
                 items: [
                    { xtype: 'image', src: "resources/images/icons/monoDownload32.png", style: { margin: "2px", maxWidth: "32px"} },
                    {
                       xtype: 'label',
                       text: 'MS Excel Report',
                       style: { margin: "2px", fontSize: "8pt" }
                    }
                 ]
              })

The alerts are called but the style isn't being applied. Is there a cleaner way of doing something so simple? OR is there a better control to use in this situation that can achieve the same results.

Answer 1

It's a shame you can't use CSS. If you could, then overCls would be the way to go: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

Barring that, your approach is pretty close. Applying the style object onto the el won't do anything, as Ext has no idea you did that. Instead you want to call setStyle or applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-applyStyles

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element-method-setStyle