ExtJS 4 - 添加底部工具欄后的額外邊框

Question

我有一個ExtJS4應用程序，它具有中等復雜的布局，由幾個嵌套面板組成，每個面板都有類型border布局。 當我向其中一個面板添加底部工具欄時，我無法弄清楚如何擺脫存在的“雙邊框”。

請參閱jsFiddle以獲取示例： http ： //jsfiddle.net/5fwLz/2/

我只想弄清楚如何使“按鈕”上方的邊框看起來正確。 任何幫助將不勝感激，謝謝！

編輯 - 我使用的解決方案： http ： //jsfiddle.net/5fwLz/4/

我認為這比下面的Akatum解決方案更清潔，當南部地區變得可折疊時，邊界也保持干凈。

Answer 1

這個解決方案非常糟糕，但它確實有效。 您可以將南邊界區域的border屬性設置為false ，然后使用style屬性定義其右邊，左邊和上邊框：

{
    region: 'south',              
    border: false,
    style: {
      borderRight: '1px solid #99BCE8',
      borderLeft: '1px solid #99BCE8',
      borderTop: '1px solid #99BCE8'
    },
    split: true,
    height: '25%'                
}

編輯小提琴在這里： http ： //jsfiddle.net/5fwLz/3/

Answer 2

對於那些可能在這里偶然發現的人。 我找到了一個使用bodyBorder配置的更好的方法。

region: 'center',
border: false,
bodyBorder: false, 

http://jsfiddle.net/5fwLz/15/