Extjs4中要修改一个button的css挺恶心的......
假设要实现以下效果:
左边几个button的字体是bold的, 右边的是normal的,并且设置bgcolor.
一开始很自然的写下这样的代码:
.btn-master-on {
font-weight: bold;
background-color: LightGreen;
background-image: none;
}
.btn-turn-on {
background-color: LightGreen;
background-image: none;
}
...
{
xtype: ‘button‘,
id: ‘master_on‘,
width: BUTTON_WIDTH,
cls: ‘btn-master-on‘,
text: ‘MASTER ON‘,
handler: function() {
...
},
}, {
xtype: ‘button‘,
id: ‘turn_on‘,
width: BUTTON_WIDTH,
cls: ‘btn-turn-on‘,
text: ‘TURN ON‘,
handler: function() {
...
},
}但是却发现bgcolor是被改变了, 然而font-weight: bold却没有效果.
在chrome中查看发现自定义的css被Extjs内置的css覆盖掉了.
于是乎想到!important, 但是增加!important仍无效. 一怒之下注释掉ext-theme-classic-all.css的.x-btn-default-small .x-btn-inner中的font-weight:normal;实现效果.
但是这样直接修改Extjs自带css是很不好的做法.
根据<>中所叙内联样式具有最高的优先级, 于是直接在button的text上写text: ‘MASTER ON‘,也可以达成效果.
原文:http://blog.csdn.net/gzzaigcnforever/article/details/23938599