Extjs4中修改button的css

浏览数：30 / 时间：2015年06月09日

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>‘,也可以达成效果.

Extjs4中修改button的css,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

Extjs4中修改button的css