如何使用pressedcls改变extjs4中按钮的背景图片？

Question

我使用 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上，背景图片设置不起作用（字体设置正常）。 那么有什么设置可以解决这个问题呢？

Answer 1

1. 将悬停效果应用于 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

2. 另一个可能的解决方案问题：Ext.Button“overCls”在 IE 中不起作用

Answer 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;
}

我使用 Ext4.2 和 IE9 兼容模式来测试它并且它有效。您必须从 ext 主题的资源文件夹中找到角、侧面和按钮背景的图像。