Extjs panel 的邊框

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