Extjs如何自定义panel header样式?
2016-01-06 13:45
423 查看
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'
},
奇怪的是,这个问题在百度上很多人问,却没有人给出正确的答案。今天我刚好也碰到这个问题,解决方法和大家分享下~~~
今天,我们就来学习如何更改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'
},
奇怪的是,这个问题在百度上很多人问,却没有人给出正确的答案。今天我刚好也碰到这个问题,解决方法和大家分享下~~~
相关文章推荐
- css3-盒子模型之边框
- CSS的几种选择器
- css相关记录-background
- CSS3第二日--圆角边框
- [css3]叉叉旋转效果
- js+css:43种常见的浏览器兼容性问题大汇总
- PHP动态压缩js,css
- WebStorm设置左侧菜单栏背景色和样式
- 禁止用户选择文字,更改浏览器滚动条样式,去除浏览器自动填充背景
- css3来回摆动
- 手机web——自适应网页设计(html/css控制)
- JS 控制CSS样式表的语法对照
- 【CSS】最全的CSS浏览器兼容问题
- CSS3——文本、段落
- 前端开发规范之CSS
- 经验分享:CSS浮动(float,clear)通俗讲解
- css3相册图片3D旋转展示特效
- CSS有用的代码片段
- CSS3——字体font
- css 透明度设定