将悬停效果应用于ExtJs中的容器

为什么这么难？我不能使用CSS，否则我已经完成了。我有一个由一个容器、一个图像和一个标签组成的“按钮”，我得到了一个容器的点击事件。然而，做一些简单的事情，比如改变悬停时的背景颜色，让我现在讨厌ExtJs，必须有一种更简单的方法来做到这一点

到目前为止，我得到的是：

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" }
                    }
                 ]
              })

---

已调用警报，但未应用样式。有没有更干净的方法来做这么简单的事情？或者，在这种情况下，是否有更好的控件可以实现相同的结果。

很遗憾，您不能使用CSS。如果可以，那么

overCls

将是一条可行的道路：

除此之外，你的方法非常接近。将样式对象应用到el上不会有任何作用，因为Ext不知道您这样做了。相反，您希望调用

setStyle

或

applyStyles

---

我认为您正在寻找的行为在

---

为什么不能使用CSS？你能重新编译SASS吗？因为那是有意义的（谢谢你的帮助，但我找到了自己的方法，开始使用css。这绝对是我想要的答案！