css - 将 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);
}

自定义.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;
}

显然，您可以保留或覆盖任何您想要的内容，混合和匹配样式。