Question

为什么这么难？我不能使用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" }
                    }
                 ]
              })

调用警报但未应用样式。做一些如此简单的事情更简洁吗？或者在这种情况下可以使用更好的控制来获得相同的结果。

Answer 1

很遗憾你不能使用CSS。如果可以，那么overCls就可以了：http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

除此之外，你的方法非常接近。将样式对象应用到el上将不会做任何事情，因为Ext不知道你这样做了。相反，您想要致电setStyle或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

Answer 2

我认为你正在寻找的行为是在

中捕获的

http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.view.View

将悬停效果应用于ExtJs中的Container

2 个答案: