如何使用pressedcls更改extjs4中按钮的背景图像？答案

【问题标题】：how to use pressedcls to change the background image of button in extjs4?如何使用pressedcls更改extjs4中按钮的背景图像？
【发布时间】：2011-12-14 14:27:54
【问题描述】：

我使用 extjs4 制作了一个切换按钮组。当我按下一个按钮时，其他按钮变为未按下。然后我想在按下后更改按钮的背景图像。所以我使用“pressedCls”。代码：

Ext.define('Crm.view.CrmNavi', {
    extend: 'Ext.toolbar.Toolbar',
    height: 27,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    html: 'button one'
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true,
                    pressed: true
                },
                {
                    cls: 'navi_btn',
                    overCls: 'navi_btn_over',
                    pressedCls: 'navi_btn_pressed',
                    xtype: 'button',
                    height: 24,
                    flex: 4,
                    margin: '0 0 0 0',
                    html: 'button two',
                    toggleGroup: 'crmNaviBtnGroup',
                    enableToggle: true
                 }
            ]
        });
    }
});

//-----------------------------------------------------------
.navi_btn{
    font-family: MicroSoft YaHei;
    font-weight: 5;
    font-size: 15px;
    text-align: center;
    color: #006f61; 
}
.navi_btn_over{
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background-image: url("images/crmNaviBtnPressed_bg.png");
    background-repeat: repeat-x;
}
.x-navi_btn_pressed{
    font-family: MicroSoft YaHei;
    font-weight: 3;
    font-size: 15px;
    text-align: center;
    color: #ffffff;
    background-image: url("images/crmNaviBtnPressed_bg.png");
    background-repeat: repeat-x;
}

//--------------------------------------------- ---------------------

它在谷歌浏览器上运行良好。但是在 IE8 上，背景图片设置不起作用（字体设置效果很好）。那么，有没有什么设置可以解决这个问题呢？

【问题讨论】：

你可以为 navi_btn_pressed 发布你的 css 吗？
虽然“navi_btn_pressed”不起作用，但我在 css 文件中为“navi_btn_pressed”添加了一个“x-”。你看，我已经发布了“over”和“pressed”的css。
你现在有这个工作了吗？
@pacman 这个问题令人沮丧。与 IE6,IE7 不同的 extjs 按钮的 Html 标签......
尽可能发布更多代码和/或创建演示（例如jsfiddle.net），以便我们帮助解决问题。

标签： javascript html css button extjs4

【解决方案1】：

Applying a hover effect to a Container in ExtJs

很遗憾你不能使用 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
另一个可能解决的问题：Ext.Button 'overCls' not working in IE

【讨论】：

【解决方案2】：

这是来自我的一个样本。在 ext 中，我在工具栏上设置了以下内容：

defaults: {
  xtype: 'button',
  toggleGroup: 'crmNaviBtnGroup',
  scale: 'large',
  pressedCls: 'side-nav-blue',                
  width: 190
}

然后在我的css中添加了

.x-btn-side-nav-blue .x-btn-default-large-tl,
.x-btn-side-nav-blue .x-btn-default-large-bl,
.x-btn-side-nav-blue .x-btn-default-large-tr,
.x-btn-side-nav-blue .x-btn-default-large-br,
.x-btn-side-nav-blue .x-btn-default-large-tc,
.x-btn-side-nav-blue .x-btn-default-large-bc,
.x-btn-side-nav-blue .x-btn-default-large-ml,
.x-btn-side-nav-blue .x-btn-default-large-mr {  
  background-image: url('../images/btn-large-side-blue-corners.gif');
}

.x-btn-side-nav-blue .x-btn-default-large-ml,
.x-btn-side-nav-blue .x-btn-default-large-mr {  
  background-image: url('../images/btn-large-side-blue-sides.gif');
}

.x-btn-side-nav-blue .x-btn-default-large-mc {
  background-image: url('../images/btn-large-side-blue-fbg.gif');
  background-position: 0 top;
  background-color: #5389b6;
}

我正在使用带有 IE9 兼容模式的 Ext4.2 来测试它，它可以工作。您必须从 ext 主题的资源文件夹中找到角落、侧面和按钮背景的图像。

【讨论】：