解决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 相关文章推荐
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JavaScript中的普通函数与构造函数比较
Apr 07 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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 echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
2014/05/05 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
浅谈五大Python Web框架
2017/03/20 Python
详解python运行三种方式
2019/05/13 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
python实现图片素描效果
2020/09/26 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
大学四年个人的自我评价
2014/02/26 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2016年元旦主持词
2015/07/06 职场文书
导游词之凤凰古城
2019/10/22 职场文书