将Extjs面板背景样式更改为Buttongroup的背景样式

Question

在Ext JS 4.1.1中，如何更改面板xtype 的背景？我想要实现的是面板的背景看起来应该是 buttongroup 的背景。

Answer 1

您可以简单地覆盖CSS或更改源，无论您喜欢什么。

例如，如果要覆盖样式并单独保留源，可以创建自己的自定义样式表并在ext.js CSS之后应用它

<link rel="stylesheet" type="text/css" media="screen" href="ext-all.css" />
<link rel="stylesheet" type="text/css" media="screen" href="custom.css" />

来自ext-all.css

.x-panel-header-default {
    font-size: 11px;
    line-height: 15px;
    border-color: #99BBE8;
    border-width: 1px;
    border-style: solid;
    background-image: none;
    background-color: #CBDDF3;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DAE7F6),color-stop(45%,#CDDEF3),color-stop(46%,#ABC7EC),color-stop(50%,#ABC7EC),color-stop(51%,#B8CFEE),color-stop(100%,#CBDDF3));
    background-image: -moz-linear-gradient(top,#DAE7F6,#CDDEF3 45%,#ABC7EC 46%,#ABC7EC 50%,#B8CFEE 51%,#CBDDF3);
    background-image: linear-gradient(top,#DAE7F6,#CDDEF3 45%,#ABC7EC 46%,#ABC7EC 50%,#B8CFEE 51%,#CBDDF3);
    -moz-box-shadow: #f4f8fd 0 1px 0 0 inset;
    -webkit-box-shadow: #F4F8FD 0 1px 0 0 inset;
    -o-box-shadow: #f4f8fd 0 1px 0 0 inset;
    box-shadow: #F4F8FD 0 1px 0 0 inset;
}

.x-toolbar-default {
    border-color: #99BBE8;
    background-image: none;
    background-color: #D3E1F1;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
    background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
    background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
}

custom.css

.x-panel-header-default {
    background-image: none;
    background-color: #D3E1F1;
    background-image: -webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#DFE9F5),color-stop(100%,#D3E1F1));
    background-image: -moz-linear-gradient(top,#DFE9F5,#D3E1F1);
    background-image: linear-gradient(top,#DFE9F5,#D3E1F1);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}

你可以显然保留或覆盖你想要的任何东西，混合和匹配样式。