位置: 编程技术 - 正文

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

  • 增值税发票作废了税钱退还吗
  • 公司车船使用税会计分录
  • 销售白酒是否要交消费税?
  • 速达建账套期初数据
  • 技术转让是指
  • 企业有利润要交什么税
  • 员工继续教育培训费计什么科
  • 车船税重复交了怎么退怎么在网上完税?
  • 变更法人流程具体流程图
  • 应付职工薪酬包括个税吗
  • 可供出售金融资产新准则叫什么
  • 财务报表层次重大错报风险增大了认定层次
  • 生产企业电费要不要计提?
  • 销售退回跨年所得税如何做账?
  • 法律规定临时工工资最迟多久结清
  • 附加税水利行政事业是否取消?
  • 长期待摊费用涉税风险应对
  • 电子商务在线支付
  • 公司接受安全罚款的账务处理
  • 我的初级备考经验怎么写
  • 委托贷款合同效力
  • 事业单位收到开办费的会计分录
  • 息税前利润和税后经营净利润
  • 定金算营业收入吗
  • php中字符串函数
  • nexus 搭建
  • npp怎么安装
  • 热带雨林瀑布群雪野
  • stable diffusion webul
  • php引用传值
  • 持有至到期投资账务处理
  • 首个ChatGPT开发的应用上线;ChatMind思维导图工具;中文提示词大全;Copilot平替 | ShowMeAI日报
  • vue destroyed销毁组件
  • nor命令
  • 个体生产经营所得优惠政策
  • 利润表中的管理费用怎么填
  • 应收账款账龄如何填写
  • 现金流量表的填写说明
  • java io读写
  • 预计负债的三个条件
  • 零售行业的销售额由什么决定
  • 已付预付款当月怎么入账
  • 建筑劳务公司工作内容
  • 资源税的征税对象都是原矿和选矿
  • 审计报告的分类不包含
  • 房屋租赁怎么干
  • 补交以前年度企业所得税怎么入账
  • 收到发票未抵扣,收票方也可以开红字信息表吗?
  • 收到科技局补贴金费怎么入账
  • 以前年度损益调整会计分录
  • 企业注销在建工程怎么处理
  • 没有票的成本怎么处理
  • 弥补以前年度亏损后缴纳所得税
  • 应收股利在资产负债表中怎么填
  • 收到红字发票怎么做账怎么做进项税额转出
  • 金蝶美金账户怎么删除
  • 各种会计凭证的填制
  • 值得收藏的一元硬币
  • windows2003远程桌面服务
  • 如何制作ubuntu系统盘
  • ubuntu的安装包
  • linux多线程并发的处理方式
  • win7 便签
  • ubuntu zed
  • win8隐藏任务栏怎么恢复
  • messengerd
  • win8系统搜索不到wifi
  • win10怎么添加游戏手柄
  • win7 设置
  • 程序员用linux可以干什么
  • 为什么无法退出
  • 微软认为
  • css网站布局实录 pdf
  • 写个置顶
  • android native opengl
  • android的图片应该放到哪一个目录下面?
  • unityc#脚本
  • 税务师事务所行政登记表怎么办理
  • 为什么增值税是销项税减进项税
  • 电子税务局app扫脸认证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设