位置: 编程技术 - 正文

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

编辑:rootadmin

Extjs的Panel和Window等组件在默认情况下是带边框的,通常情况下,单独使用没有什么关系,但是将Panel作为Window组件的子组件时就会出现双重边框的现象,如果Window组件中含有两个或者两个以上的Panel,那么Panel和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样式来解决。(完)^_^

推荐整理分享解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题,希望有所帮助,仅作参考,欢迎阅读内容。

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

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

ExtJS中文乱码之GBK格式编码解决方案及代码 这几天做后台看了一些Ext的知识,在切入工作项目的时候出现了乱码情况,所以就总结了这篇ExtJS中文乱码之GBK格式编码解决办法的文章,作为记录。1

Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法 在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中如下图:但是这个一般没有什么用处,只是用于后台取值的作用。so加一个属性:hideable:f

Extjs中TabPane如何嵌套在其他网页中实现思路及代码 vartabPanel=newExt.TabPanel({activeTab:0,region:'center',layoutOnTabChange:false,deferredRender:true,items:[{title:'百度',layout:'fit',height:,id:'training_grief_rep_tab_4',border:false,deferredR

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

本文链接地址:https://www.jiuchutong.com/biancheng/370267.html 转载请保留说明!

上一篇:解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题(chromexcel)

下一篇:ExtJS中文乱码之GBK格式编码解决方案及代码(excel乱码怎么转换)

  • 个税免申报什么时候申报
  • 小规模增值税会计处理流程
  • 印花税办理流程
  • 个税返还款要交增值税吗
  • 什么发票可以做替票
  • 为职工提供免费午餐
  • 公司 捐赠
  • 递延收益是什么表
  • 房地产企业简易计税
  • 现房销售土增税怎么缴纳
  • 企业发生销售折扣的原因有
  • 当天开的进项发票怎么开
  • 开具出口发票时免税类型怎么选择?
  • 购销合同印花税税率2023
  • 旅游景区税收标准
  • 实行差额征税的劳务派遣公司一般纳税人认定标准
  • 个人独资企业股权能出让吗
  • 预提固定资产折旧费
  • 个人银行卡流水达到多少要交税
  • 资产负债中应交税费怎么算
  • 认购价和发行价的差价
  • 个人股权转给公司要交个税吗
  • 跨年的工会经费怎么做分录
  • 本月没有发生额,月末怎么结账
  • 鸿蒙桌面卡片怎么变小
  • 华为鸿蒙系统网速慢怎么解决
  • 备用金冲销会计怎么做账
  • 期间费用可以计入产品成本的费用吗
  • 任务栏音量图标点击无反应
  • php面向对象是什么意思
  • 微软surface售后电话人工
  • 资产负债表存货包括哪些科目
  • 担保公司的会计分录
  • 强制划缴税款
  • 外购商品转为自用洧费税计算
  • 企业出售使用过的固定资产的增值税处理
  • 厂房押金不退怎么要回来
  • 预提费用的账务处理
  • 普尔曼多少钱
  • php中可用于设置变量类型的函数
  • 摇树的英文是什么
  • thinkphp excel
  • 博客管理系统开题报告
  • php递归函数桃子一天吃一半
  • 利润表所得税费用怎么算
  • tmux复制粘贴
  • 小规模纳税人研发费用加计扣除优惠政策
  • 固定资产出售算不算收入
  • wordpress全站伪静态
  • python中lambda用法
  • 车票增值税抵扣怎么操作
  • 人力资源行业税收优惠
  • 过账怎么操作
  • 社区居委会有哪些成员
  • 估价入账的账务处理
  • 小额贷款在银行需要什么条件
  • 加班费是计入应交税费吗
  • 安装调试费收费标准
  • 无法支付的应付账款摘要怎么写
  • 预收租金会计分录科目
  • 固定资产一次性扣除账务处理
  • 公司银行开户的一些资料是公司办公室保存还是财务保存
  • 企业持有的能够对被投资单位实施控制的长期股权投资
  • DxO Optics Pro 9 激活破解安装详细图文教程
  • Centos Nginx + Svbversion配置安装方法分享
  • win7自带软件在哪里
  • win7进入dos的方法
  • linux ssh gui
  • linux bzz
  • eclipse 代码提示指令在哪改
  • perl 运算
  • unity多人语音
  • 如何旋转图片30度
  • nodejs使用视频教程
  • time模块 python
  • 香港居民个人转让境内股权所得个人所得税税率
  • 上饶市国家税务局各县区办公楼修缮
  • 建筑工地临时板房验收规范最新
  • 开票软件登录失败怎么办
  • 江苏税务局网上预缴税流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设