位置: 编程技术 - 正文

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

  • 房地产预缴增值税计算方式
  • 增值税的专用发票含税吗
  • 提现的手续费怎么做账
  • 开票和收到的款金额不一样怎么办?
  • 小规模纳税人给个人怎么开发票
  • 累计净值包含业务收入吗
  • 工会费个税税前扣除标准
  • 月中入职新公司社保谁交
  • 形式发票怎么写
  • 社保基数是按税前工资还是税后工资
  • 应扣未扣的个人所得税税收如何处理
  • 预付的账款属于
  • 出口退税附加税什么时候缴纳
  • 股权转让个人所得税
  • 技术开发费税收优惠政策
  • 临时工工资个税怎么算
  • 小规模纳税人出售不动产征收率
  • 享受小微企业所得税优惠条件2022
  • 空白发票丢失怎么写说明
  • 出售已计提减值准备的固定资产
  • 批发零售的成本核算
  • 超市买的东西开什么发票
  • 劳务成本属于费用项目吗
  • 出口加工区内企业不能从事的业务有
  • 年初建账的期初余额
  • linux中压缩
  • linux alias永久生效
  • 小型微利企业怎么认定最新标准
  • 保险支付方式有哪些
  • Windows11报sill idealTree buildDeps安装慢或者卡顿解决方案
  • 长期借款利息的会计科目
  • 发票开烟酒
  • 技术服务费可以计入成本吗
  • 结转以前年度本年利润会计分录
  • php进行批量任务分类
  • imu定位
  • 若依框架前端发请求
  • php文件夹下所有文件下载
  • 服务型公司营业执照图片
  • mybatis的
  • vue was assigned to but
  • 关于转租电费收取规定
  • 银行存款日记账填写样本图
  • 抵扣进项税是怎么算的
  • sql2005备份数据库
  • 货物或应税劳务名称怎么填
  • 专家评审费如何入账
  • 买赠业务税务处理
  • 应付账款已付款应该怎样记账
  • 利润总额包括什么项目
  • 个人开技术服务费
  • 会计利润调增调减项目
  • 支付的劳务派遣服务费计入什么科目
  • 融资租赁具体操作流程
  • 批量sql语句
  • winxp和win7共享
  • 微软终止代码大全
  • win10应用商店应用少
  • win10预览版退回正式版
  • windows模拟
  • webinstall.exe - webinstall是什么进程
  • 禁用windows installer没有用
  • qconsvc.exe - qconsvc是什么进程 有什么作用
  • Win10 Mobile 10586无法更新应用怎么办 一招教你解决
  • Olehelp.exe - Olehelp是什么进程 有什么用
  • 可用分区az
  • linux系统怎么弄
  • css示范例子
  • jquery实现复选框全选
  • shell动态显示
  • jquery ajax双击div可直接修改div中的内容
  • python语言文件
  • eclipse怎么连接derby数据库
  • 发票打印怎么调整尺寸
  • 北京比较大五金市场在哪
  • 汽车销售流程有哪些环节?每个环节的主要内容是什么?
  • 税务登记证办理
  • 小米之家可以
  • 作为税务人员哪些基本素质
  • 济南高新区工商局政务大厅电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设