如何使用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中的Container

   遗憾的是你无法使用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主题中的资源文件夹中找到角落，侧面和按钮背景的图像。