Extjs 4 自界说panel边框,办理双重边框题目

Extjs的Panel和Window等组件在默认环境下是带边框的，凡是环境下，单独行使没有什么相关，可是将Panel作为Window组件的子组件时就会呈现双重边框的征象，假如Window组件中含有两个可能两个以上的Panel，那么Panel和Panel组件之间的边框会一再累加，也就是说会酿成双重边框。现实上双重边框并不是很影响外面，但几多看上去会有些不太令人满足，因此我们就得想步伐将两重边框去掉，酿成单边框。下面是前后两张比拟图，各人细心调查一下两个window的边框部门，可以发明前者较粗，后者较细。

相干下载：EXTJS 类库 4.0

　　　　　　　　　　　　　　　　　　　　图一

　　　　　　　　　　　　　　　　　　　　　　图二

下面我们就要想办理的步伐了。

起首想到的是我们可以让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样式来办理。（完）^_^

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!