解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题


Posted in Javascript onJanuary 11, 2013

Extjs的Panel和Window等组件在默认情况下是带边框的,通常情况下,单独使用没有什么关系,但是将Panel作为Window组件的子组件时就会出现双重边框的现象,如果Window组件中含有两个或者两个以上的Panel,那么Panel和Panel组件之间的边框会重复累加,也就是说会变成双重边框。实际上双重边框并不是很影响外观,但多少看上去会有些不太令人满意,因此我们就得想办法将两重边框去掉,变成单边框。下面是前后两张对比图,大家仔细观察一下两个window的边框部分,可以发现前者较粗,后者较细。

解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

图一

解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

图二

下面我们就要想解决的办法了。

首先想到的是我们可以让Window的边框为0,即设置Window组件的属性border:false,此时,可以发现Window四周的边框编程单边框了,但是Window里面上面的GridPanel和下面的Panel之间还是会有双重边框,显得不协调,而且底部的工具条的四周没有了边框(因为“保存”按钮所在的工具条是属于Window,Window的边框没有了之后,当然会影响到底部工具条的边框)。于是这种方案不可行。弃之!

第二种方案是保留Window组件的边框,想办法去掉Panel的边框,通过查ExtJS的帮助文档,发现可以通过定义bodyStyle来控制Panel的样式。于是给上面的Panel分别设置bodyStyle属性,GridPanel:bodyStyle: 'border-width:1px 0 1px 0;',下方的Panel:bodyStyle: 'border-width:1px 0 0 0; background:transparent',之后在刷新重新看效果,发现边框确实编程但边框了,但是还有一部分边框是双重的,即时上面那个GridPanel的表头的两侧,以及下面按个Panel的Header的两侧。开来这种办法还是比较靠谱的。我们在精心修改一下就好了。下一步要做的就是,为每一个Panel定义一个cls属性,然后对通过自己写样式来限制表头以及header的样式,即覆盖ExtJS默认的样式(只是修改border的样式)。通过Chrome的“审查元素”发现:表头默认的一个CSS样式类是x-grid-header-ct,Panel默认的一个样式类是x-panel-header。下面要做的就是自己写样式来覆盖以前的样式了,比如我为两个Panel设置的cls为addr-panel,然后新加CSS样式类.addr-panel .x-grid-header-ct{border-width: 1px 0 0 0 !important;},.addr-panel .x-panel-header{border-width:0;}。保存之后刷新之后查看效果,就是图二的效果了,完成!

如果以后我们在遇到类似的问题都可以考虑用CSS样式来解决。(完)^_^

Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
详解AngularJS 模块化
Jun 14 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
js实现表格数据搜索
Aug 09 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 #Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 #Javascript
关于JavaScript的面向对象和继承有利新手学习
Jan 11 #Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 #Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 #Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 #Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
axios基本入门用法教程
2017/03/25 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
Python打印斐波拉契数列实例
2015/07/07 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
阿里旅行:飞猪
2017/01/05 全球购物
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
外语系大学生自荐信范文
2014/03/01 职场文书
股份合作协议书
2014/04/12 职场文书
承诺书格式范文
2014/06/03 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
800字作文之大雪
2019/12/04 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android