Extjs的Panel和Window等組件在默認(rèn)情況下是帶邊框的，通常情況下，單獨(dú)使用沒有什么關(guān)系，但是將Panel作為Window組件的子組件時(shí)就會(huì)出現(xiàn)雙重邊框的現(xiàn)象，如果Window組件中含有兩個(gè)或者兩個(gè)以上的Panel，那么Panel和Panel組件之間的邊框會(huì)重復(fù)累加，也就是說會(huì)變成雙重邊框。實(shí)際上雙重邊框并不是很影響外觀，但多少看上去會(huì)有些不太令人滿意，因此我們就得想辦法將兩重邊框去掉，變成單邊框。下面是前后兩張對(duì)比圖，大家仔細(xì)觀察一下兩個(gè)window的邊框部分，可以發(fā)現(xiàn)前者較粗，后者較細(xì)。

　　　　　　　　　　　　　　　　　　　　圖一

　　　　　　　　　　　　　　　　　　　　　　圖二

下面我們就要想解決的辦法了。

首先想到的是我們可以讓W(xué)indow的邊框?yàn)?，即設(shè)置Window組件的屬性border:false，此時(shí)，可以發(fā)現(xiàn)Window四周的邊框編程單邊框了，但是Window里面上面的GridPanel和下面的Panel之間還是會(huì)有雙重邊框，顯得不協(xié)調(diào)，而且底部的工具條的四周沒有了邊框（因?yàn)椤氨４妗卑粹o所在的工具條是屬于Window，Window的邊框沒有了之后，當(dāng)然會(huì)影響到底部工具條的邊框）。于是這種方案不可行。棄之！

第二種方案是保留Window組件的邊框，想辦法去掉Panel的邊框，通過查ExtJS的幫助文檔，發(fā)現(xiàn)可以通過定義bodyStyle來控制Panel的樣式。于是給上面的Panel分別設(shè)置bodyStyle屬性，GridPanel：bodyStyle: 'border-width:1px 0 1px 0;'，下方的Panel：bodyStyle: 'border-width:1px 0 0 0; background:transparent',之后在刷新重新看效果，發(fā)現(xiàn)邊框確實(shí)編程但邊框了，但是還有一部分邊框是雙重的，即時(shí)上面那個(gè)GridPanel的表頭的兩側(cè)，以及下面按個(gè)Panel的Header的兩側(cè)。開來這種辦法還是比較靠譜的。我們?cè)诰男薷囊幌戮秃昧?。下一步要做的就是，為每一個(gè)Panel定義一個(gè)cls屬性，然后對(duì)通過自己寫樣式來限制表頭以及header的樣式，即覆蓋ExtJS默認(rèn)的樣式（只是修改border的樣式）。通過Chrome的“審查元素”發(fā)現(xiàn)：表頭默認(rèn)的一個(gè)CSS樣式類是x-grid-header-ct，Panel默認(rèn)的一個(gè)樣式類是x-panel-header。下面要做的就是自己寫樣式來覆蓋以前的樣式了，比如我為兩個(gè)Panel設(shè)置的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;}。保存之后刷新之后查看效果，就是圖二的效果了，完成！

如果以后我們?cè)谟龅筋愃频膯栴}都可以考慮用CSS樣式來解決。（完）^_^

最新評(píng)論