how to use pressedcls to change the background image of button in extjs4?

Question

I made a toggle button group using extjs4. When I press one button, the other buttons change to unpressed. Then I want to change the background image of the button after pressed. So I use "pressedCls". The code:

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

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

It works well on google chrome. But on IE8, the background image settings does not work(the font settings works well). So, is there any settings can solve this problem?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   It's a shame you can't use CSS. If you could, then overCls would be the way to go: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Barring that, your approach is pretty close. Applying the style object onto the el won't do anything, as Ext has no idea you did that. Instead you want to call setStyle or 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. Another question with possible solution: Ext.Button 'overCls' not working in IE

Answer 2

This is from a sample I had. In ext I set the following on the toolbar:

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

and then in my css I added

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

I am using Ext4.2 with IE9 compatibility mode to test this and it works. You will have to find the images for the corners, side and button background from the resource folder in ext themes.