Extjs4中修改button的css

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是很不好的做法.

根据<<CSS优先级详解>>中所叙内联样式具有最高的优先级, 于是直接在button的text上写text: ‘<span style=”font-weight: bold;”>MASTER ON</span>’,也可以达成效果.

相关文章：

你感兴趣的文章：

标签云：