將Ext JS Panel的背景風格更改爲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; 
} 

您可以保留或覆蓋您想obvi什麼混合並匹配樣式。