轉自：http://www.cnblogs.com/yuezk/archive/2012/09/22/2698363.html
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樣式來解決。（完）^_^