Как использовать Presscls, чтобы изменить фоновое изображение кнопки в extjs4?

Question

Я создал группу переключателей, используя extjs4. Когда я нажимаю одну кнопку, другие кнопки изменяются на не нажаты Затем я хочу изменить фоновое изображение кнопки после нажатия. Поэтому я использую «PressCls». Код:

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. Но на IE8 настройки фонового изображения не работают (настройки шрифта работают хорошо). Итак, есть ли настройки, которые могут решить эту проблему?

Answer 1

Это из образца, который у меня был.В ext я установил следующее на панели инструментов:

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

, а затем в моем CSS я добавил

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

Я использую Ext4.2 с режимом совместимости IE9, чтобы проверить это, и этоработает.Вам нужно будет найти изображения для углов, боков и фона кнопки из папки ресурсов в ext темах.

Answer 2

1. Применение эффекта наведения к контейнеру в ExtJs

   Жаль, что вы не можете использовать CSS.Если бы вы могли, то overCls был бы подходящим способом: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-overCls

   Если не считать этого, ваш подход довольно близок.Применение объекта стиля к el ничего не даст, так как Ext не знает, что вы это сделали.Вместо этого вы хотите вызвать 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' не работает в IE