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样式来解决。（完）^_^
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果（九）》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]