解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题

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样式来解决。（完）^_^