Extjs如何自定义panel header样式？

Extjs6在样式上改动很大，我们也可以根据自己的实际需求或者美工的要求来自定义我们的控件。

今天，我们就来学习如何更改panel header样式。

1、我们首先打开Extjs6的官方案例，发现他们的panel的header和我们平时用的背景色不一样，通过firebug发现系统是自定义了一个样式文件Admin-all_1.css，并更改了系统默认的x-panel-header-default ，那在我们的项目中如何改呢？

2、查看API

API我们查看panel的config，发现有很多cls相关的参数，但是唯独没有类似headerCls的。不过我们发现却有个header参数，

3、header，我们可以把它作为一个单独的控件来看，如果是这样，那就好办了，我们直接可以改动它的属性。

4、结论

最终，我们的 改动如下

首先，我们在我们的样式表里加入：

/*自定义样式*/
.x-panel-header-new {
    background-image: none;
    background-color: #35BAF6;
}

然后，在我们的panel中加入如下代码即可

header:{
cls:'x-panel-header-new'
},

奇怪的是，这个问题在百度上很多人问，却没有人给出正确的答案。今天我刚好也碰到这个问题，解决方法和大家分享下~~~