为什么这么难?我不能使用 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
将是要走的路: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
关于extjs - 将悬停效果应用于 ExtJs 中的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12113325/