解決Extjs 4 Panel作為Window元件的子元件時出現雙重邊框問題_extjs

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