come usare pressedcls per cambiare l'immagine di sfondo del pulsante in extjs4?

Question

Ho creato un gruppo di pulsanti di attivazione utilizzando extjs4. Quando premo un pulsante, gli altri pulsanti diventano non compressi. Quindi voglio modificare l'immagine di sfondo del pulsante dopo aver premuto. Quindi uso "pressedCls". Il codice:

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

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

Funziona bene su google chrome. Ma su IE8, le impostazioni dell'immagine di sfondo non funzionano (le impostazioni dei font funzionano bene). Quindi, ci sono delle impostazioni in grado di risolvere questo problema?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   E 'un peccato non è possibile utilizzare i CSS. Se si potesse, quindi overCls sarebbe la strada da percorrere: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Blocco che, il tuo approccio è abbastanza vicino. Applicare l'oggetto stile al server non farà nulla, poiché Ext non ha idea che l'abbia fatto. Invece si desidera chiamare setStyle o 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. Un'altra domanda con possibile soluzione: Ext.Button 'overCls' not working in IE

Answer 2

Questo è da un campione che ho avuto. In ext ho impostato il seguente sulla barra degli strumenti:

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

e poi nel mio css ho aggiunto

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

Sto usando Ext4.2 con modalità di compatibilità IE9 per testare questo e funziona. Dovrai trovare le immagini per gli angoli, il lato e lo sfondo del pulsante dalla cartella delle risorse nei temi ext.