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樣式來解決。（完）^_^

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈