css - Ext JS Panel の背景スタイルを Buttongroup の背景スタイルに変更する

Question

Ext JS 4.1.1 で、パネル xtypeの背景を変更するにはどうすればよいですか? 私が達成したいのは、パネルの背景がボタングループの背景のように見えることです。

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;
}

明らかに必要なものを保持または上書きし、スタイルを組み合わせて一致させることができます。