extjs4 में बटन की पृष्ठभूमि छवि को बदलने के लिए प्रेसडक्ल का उपयोग कैसे करें?

Question

मैंने extjs4 का उपयोग कर टॉगल बटन समूह बनाया है। जब मैं एक बटन दबाता हूं, तो अन्य बटन दबाए जाते हैं। फिर मैं दबाए जाने के बाद बटन की पृष्ठभूमि छवि को बदलना चाहता हूं। तो मैं "दबाए गए सीएलएस" का उपयोग करता हूं। कोड:

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 क्रोम पर अच्छी तरह से काम करता है। लेकिन IE8 पर, पृष्ठभूमि छवि सेटिंग्स काम नहीं करती हैं (फ़ॉन्ट सेटिंग्स अच्छी तरह से काम करती हैं)। तो, क्या कोई समस्या इस समस्या को हल कर सकती है?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   यह एक शर्म की बात है आप सीएसएस का उपयोग नहीं कर सकता है। यदि आप कर सकते हैं, तो overCls जाने का तरीका होगा: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   यह छोड़कर, आपका दृष्टिकोण बहुत करीब है। एल पर स्टाइल ऑब्जेक्ट लागू करने से कुछ भी नहीं होगा, क्योंकि एक्स को पता नहीं है कि आपने ऐसा किया है। इसके बजाय आप 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. संभव समाधान के साथ एक और सवाल कॉल करना चाहते हैं: Ext.Button 'overCls' not working in IE

Answer 2

यह एक नमूना मैं था से है। ext में मैं उपकरण पट्टी पर निम्नलिखित सेट:

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

और फिर मेरी सीएसएस में मैं

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

जोड़ा मैं IE9 संगतता मोड के साथ Ext4.2 उपयोग कर रहा हूँ इस परीक्षण करने के लिए है और यह काम करता है। आपको बाहरी विषयों में संसाधन फ़ोल्डर से कोनों, साइड और बटन पृष्ठभूमि के लिए छवियां मिलनी होंगी।