解决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 相关文章推荐
js操作checkbox遇到的问题解决
Jun 29 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JavaScript实现搜索框的自动完成功能(一)
Feb 25 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
AngularJS通过$sce输出html的方法
Sep 22 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
JavaScript实现alert弹框效果
Nov 19 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
一个用php3编写的简单计数器
2006/10/09 PHP
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
PHP比你想象的好得多
2014/11/27 PHP
php随机抽奖实例分析
2015/03/04 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
Javascript中浮点数相乘的一个解决方法
2014/06/03 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
js new Date()实例测试
2019/10/31 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python通过post提交数据的方法
2015/05/06 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python文件操作函数用法实例详解
2019/12/24 Python
初中教师业务学习材料
2014/05/12 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
财务工作失误检讨书
2015/02/19 职场文书
会议主持词结束语
2015/07/03 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
python多线程方法详解
2022/01/18 Python