位置: 编程技术 - 正文

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

  • 留抵税额退税怎么做账
  • 销售财务软件的公司怎么做账
  • 机动车销售统一专票图片
  • 小规模教育培训计划
  • 房屋出租收到的租金会计分录
  • 小微企业零申报多久报一次税
  • 按收入比例结转怎么做账
  • 银行回单附言写错业务
  • 预算会计工资是应发工资还是实发工资
  • 现金折扣在买方还是卖方
  • 送员工礼物
  • 城建税教育附加地方教育附加的税率
  • 押金放到哪个会计科目
  • 所得税费用是在哪个科目
  • 差额开票扣除额可以大概数
  • 开票满500万一定会升一般纳税人吗
  • 保理利率多少可以买房
  • 物流车辆挂靠账务怎么处理?
  • 先进行税务登记还是先注册开户银行账号
  • 停车费可以抵扣吗合法吗
  • 一般纳税人取得免税农产品进项怎么抵扣
  • win10如何查看显卡版本
  • 电缆与变压器连接有何规定
  • 被投资企业所在地什么意思
  • 增值税即征即退2023政策
  • abstract php
  • .exe是指什么文件
  • 领用增值税专用发票需要旧发票兑换吗
  • 资产证券化会计信息披露规范
  • PHP:mcrypt_module_get_supported_key_sizes()的用法_Mcrypt函数
  • 机动处置什么意思
  • PHP:imagecolorclosest()的用法_GD库图像处理函数
  • yii2中LinkPager增加总页数和总记录数的实例
  • 劳务外包会计分录最新
  • 公司注销前的资料怎么办
  • php匿名函数和回调函数
  • 发票密码区如何调整
  • 开源模型:小羊驼(Vicuna-13B),可达chatGPT九成效果。
  • html中写php
  • 印花税申报完成如何缴纳
  • 工会费的会计分录是什么
  • 开票人是管理员可以报销吗
  • 其它应付款的审计内容
  • 全资子公司的利润怎么记录母公司报表
  • 一般纳税人购进免税农产品如何抵扣进项税额
  • 政府扶持资金的优缺点
  • 电子商务会计科目有哪些
  • 发票本月没有认证能用吗
  • 资产减值损失是负的意味着什么
  • 借款利息计入哪个科目
  • 法人在公司账户取钱要纳税么
  • 预缴土地增值税的会计处理
  • 企业出现有利润的现象
  • 会计基础知识归纳大全
  • Mysql优化sql方案
  • mysql5.7.19 winx64解压缩版安装配置教程
  • windows任务管理器怎么打开
  • 怎么看mac的硬盘型号
  • linux系统中用户账户有哪些分类
  • 重装系统要注意哪些
  • helppane是什么应用程序
  • ubuntu下安装windows
  • mac os常用快捷键
  • xp开机chkdsk
  • 史上最详细的mrtg(Multi Router Traffic Grapher)设置说明
  • windows 10为什么不能关掉自动更新
  • win10系统怎么新建磁盘
  • linux无法使用ls
  • perl子函数
  • tree cmd
  • Tasharen Fog of War v1.0战争迷雾插件的使用(含Unity5.0Bug解决)
  • 安卓开发速成
  • 会计餐费费的会计分录
  • 焦作国税局官网
  • 货车可申请停保吗
  • 广汽传祺gs52013款2.0自动怎么样
  • 福州台江区怎么去
  • 机票验真查询系统
  • 什么是非行政许可
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设