Changing Ext JS Panel's background style to that of Buttongroup's

Question

In Ext JS 4.1.1, how can I change the background of a panel xtype? What I want to achieve is that the background of panel should look like the one of buttongroup.

Answer 1

You can simply override the CSS or change the source, whichever you like.

For example if you want to override the styles and leave source alone you can create your own custom stylesheet and apply it after the 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" />

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

You can keep or overwrite anything you want obviously, mix and matching the styles.