Extjs 4 自定义panel边框，解决双重边框问题

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样式来解决