我使用extjs4创建了一个切换按钮组。
当我按下一个按钮时,其他按钮变为未按下状态。
然后,我想在按下按钮后更改按钮的背景图像。
所以我用“pressedCls”。
编码:
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;
}
//------------------------------------------------ ------------------
它在谷歌浏览器上运行良好。
但是在IE8上,背景图像设置不起作用(字体设置很好用)。
那么,有什么设置可以解决这个问题吗?
最佳答案