解决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 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
ASP Json Parser修正版
Dec 06 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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函数
2006/12/06 PHP
PHP通用检测函数集合
2011/02/08 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
jQuery 阴影插件代码分享
2012/01/09 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Django 中自定义 Admin 样式与功能的实现方法
2019/07/04 Python
Python 分布式缓存之Reids数据类型操作详解
2020/06/24 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
Pharmacy Online中文直邮网站:澳洲大型药房
2020/06/27 全球购物
公司JAVA开发面试题
2015/04/02 面试题
部队学习十八大感言
2014/01/11 职场文书
仓库规划计划书
2014/04/28 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python