Jak używać przyciśnięć do zmiany obrazu tła przycisku w extjs4?

Question

Utworzono grupę przycisków przełączania za pomocą extjs4. Po naciśnięciu jednego przycisku pozostałe przyciski zmieniają się w nie wciśnięte. Następnie chcę zmienić obraz tła przycisku po naciśnięciu. Używam więc "pressedCls". Kod:

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

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

Działa dobrze w Google Chrome. Ale na IE8 ustawienia obrazu tła nie działają (ustawienia czcionek działają dobrze). Czy są jakieś ustawienia, które mogą rozwiązać ten problem?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   To wstyd nie można użyć CSS. Gdybyś mógł, wtedy overCls byłby sposób na: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Po pierwsze, Twoje podejście jest bliskie. Zastosowanie obiektu stylu na el nie spowoduje niczego, ponieważ Ext ​​nie ma pojęcia, że ​​to zrobiłeś. Zamiast chcesz wywołać metody setStyle lub 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. Kolejne pytanie z możliwych rozwiązań: Ext.Button 'overCls' not working in IE

Answer 2

To z próbki miałem. W wew ustawić następujące na pasku narzędzi:

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

a potem w moim css dodałem

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

Używam Ext4.2 z trybu zgodności IE9 to sprawdzić i działa. Będziesz musiał znaleźć obrazy dla narożników, tła strony i przycisku z folderu zasobów w ext motywy.