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