làm thế nào để sử dụng các nút nhấn để thay đổi hình nền của nút trong extjs4?

Question

Tôi đã tạo nhóm nút chuyển đổi bằng extjs4. Khi tôi nhấn một nút, các nút khác sẽ thay đổi thành không nén. Sau đó, tôi muốn thay đổi hình nền của nút sau khi nhấn. Vì vậy, tôi sử dụng "pressCls". Mã:

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

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

Nó hoạt động tốt trên google chrome. Nhưng trên IE8, cài đặt hình nền không hoạt động (cài đặt phông chữ hoạt động tốt). Vì vậy, có bất kỳ cài đặt nào có thể giải quyết vấn đề này không?

Answer 1

1. Applying a hover effect to a Container in ExtJs

   Đó là một sự xấu hổ bạn không thể sử dụng CSS. Nếu bạn có thể, thì overCls sẽ là con đường để đi: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Chặn đó, cách tiếp cận của bạn là khá gần. Áp dụng đối tượng kiểu vào el sẽ không làm bất cứ điều gì, như Ext không có ý tưởng bạn đã làm điều đó. Thay vào đó bạn muốn gọi setStyle hoặc 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. Một câu hỏi với giải pháp khả thi: Ext.Button 'overCls' not working in IE

Answer 2

Đây là từ một mẫu tôi đã có. Trong ext tôi đặt sau trên thanh công cụ:

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

và sau đó trong css của tôi, tôi thêm

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

Tôi đang sử dụng Ext4.2 với chế độ tương thích IE9 để kiểm tra này và nó hoạt động. Bạn sẽ phải tìm các hình ảnh cho các góc, bên và nền nút từ thư mục tài nguyên trong các chủ đề mở rộng.