extjs4'ün arka plan görüntüsünü değiştirmek için pressedcls nasıl kullanılır?

Question

extjs4'ü kullanarak bir geçiş düğmesi grubu yaptım. Bir düğmeye bastığımda, diğer düğmeler bastırılmayacak şekilde değişir. Ardından, basıldıktan sonra düğmenin arkaplan görüntüsünü değiştirmek istiyorum. Yani "pressedCls" kullanıyorum. kodu:

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

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

Google Chrome'da iyi çalışıyor. Ancak, IE8'de arka plan görüntüsü ayarları çalışmıyor (yazı tipi ayarları iyi çalışıyor). Yani, bu sorunu çözebilecek herhangi bir ayar var mı?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   Size CSS kullanamazsınız yazık. Eğer, o zaman overCls gitmek için yol olurdu olsaydı: Bu çözümün engellenmesi http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   , yaklaşımınız oldukça yakındır. Stil nesnesini 'un üzerine uygulamak, Ext'nin hiçbir fikriniz olmadığı için hiçbir şey yapmaz. Bunun yerine mümkün çözümü ile başka soru setStyle veya 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. aramak istediğiniz: Ext.Button 'overCls' not working in IE Bu ben bir örnekten olduğu

Answer 2

. Bunu test etmek için IE9 uyumluluk modu ile Ext4.2 kullanıyorum ve çalışıyor

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

eklendi benim css

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

ve sonra: ext ben araç çubuğunda aşağıdaki ayarlayın. Köşeler, kenarlar ve düğme arka planı için resimlerin dış temalardaki kaynak klasöründen bulmanız gerekir.