Css 更改Ext JS面板'；s的背景样式为Buttongroup'；s

在ExtJS4.1.1中，如何更改面板xtype的背景？我想要实现的是，面板的背景应该看起来像按钮组的背景

---

您只需覆盖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" />

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

---

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

我建议在面板中添加

componentCls

，并使用该类进行样式设置，否则将影响所有面板。

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