位置: 编程技术 - 正文

解决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乱码怎么转换)

  • 出口退税申报的发票无电子信息是什么意思
  • 完税证明是可以抵扣吗
  • 特许经营权转让合同
  • 工程施工与工程结算在资产负债表里
  • 小规模开票软件怎么下载
  • 小微企业增值税减免账务处理
  • 如何设置采购入库的对方科目暂估科目
  • 记账凭证的附件包括哪些
  • 收到0税率的增值税发票
  • 主营业务收入计入什么明细账
  • 工会专户收到职工福利经费会计处理怎么做?
  • 信用卡产生滞纳金
  • 购买的商品赠送如何做账
  • 含有商品编码的增值税普通发票如何开具?
  • 企业租车费用怎么处理方法
  • 监控维护需要什么经营范围
  • 企业增值税不可以跨月交吗
  • 计提增值税会计账务处理
  • 纳税人跨县(市、区)提供建筑服务
  • 应交税费未交增值税是什么意思
  • 公司名下商品房交易开具发票
  • 会计速动比率计算公式
  • 污水处理费谁来收
  • 废料出售收入
  • 建筑业一般纳税人简易计税和一般计税
  • 如何正确核算出租房屋所应交的房产税?
  • 质量扣款入什么科目
  • 同一年可以先娶后嫁吗
  • 在linux2.4.0版本中
  • 发放工资的时候,如何在excel里快速查询未发放成功的
  • 生物制品可以开箱验货吗
  • 如何知道家里网络是多少兆
  • 方正电脑u盘启动按什么键
  • 固定资产折旧表述不正确的是
  • 年终奖是多发一个月工资吗
  • 不动产经营租赁范围
  • 进项发票抵扣途中怎么办
  • vue可视化面板怎么打开
  • 股权投资取得的收入计入什么科目
  • 项目版本管理是什么
  • 企业职工教育培训
  • vue3项目搭建
  • pytorch1.9.0
  • 个体工商户使用个人二维码收款违法吗
  • 微信支付开发者平台
  • 主营业务收入月末需要结转吗
  • php的urlencode
  • 织梦作坊的微博
  • 织梦cms官网
  • 汇率差的差额计算方式
  • 润滑脂开票属于哪一类
  • 营业外支出的计算公式
  • 减值准备对当期损益的影响
  • 货到票未到的会计分录怎么做
  • mysql升级-5.1升级到5.7
  • 其他债权投资计提减值影响所有者权益吗
  • 公司减少注册资本的条件和程序
  • 无形资产的处置损益
  • 质保金怎么做账
  • 金蝶系统如何设置套打
  • 如何进行固定资产审计
  • 收到发票税点计入什么科目
  • 免征企业所得税的有哪些行业
  • 会计分录要怎么写
  • 建账是啥意思
  • SQL Transcation的一些总结分享
  • mysql安装配置教程5.7.25
  • ie11 ua
  • linux系统中的一切都归结为
  • 电脑怎么调win7系统
  • 开启电脑上帝模式
  • windows xp桌面图标
  • ubuntu怎么安装程序
  • linux ftpd
  • python火车订票系统
  • U3DPlayer UnityWebPlayer动态改变src
  • javascript如何学
  • android开发范例实战宝典
  • 北京摇号摇中了能过户吗
  • 全国城管改革什么时候结束
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设