cómo usar presionado para cambiar la imagen de fondo del botón en extjs4?

Question

Creé un grupo de botones de alternar usando extjs4. Cuando presiono un botón, los otros botones cambian a no presionado. Luego quiero cambiar la imagen de fondo del botón después de presionarlo. Entonces uso "pressedCls". El código:

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

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

Funciona bien en google chrome. Pero en IE8, la configuración de la imagen de fondo no funciona (la configuración de la fuente funciona bien). Entonces, ¿hay alguna configuración que pueda resolver este problema?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   Es una pena que no se puede utilizar CSS. Si se pudiera, entonces sería overCls el camino a seguir: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Aparte de eso, su enfoque es bastante estrecha. Aplicar el objeto de estilo en el el no hará nada, ya que Ext no tiene idea de que hayas hecho eso. lugar al que desea llamar o 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. Otra pregunta con una posible solución: Ext.Button 'overCls' not working in IE

Answer 2

Se trata de una muestra que tenía. En ext puse lo siguiente en la barra de herramientas:

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

y luego en mi css añadí

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

estoy usando Ext4.2 con el modo de compatibilidad de IE9 para probar esta y funciona. Deberá encontrar las imágenes para las esquinas, los laterales y el fondo del botón de la carpeta de recursos en temas ext.