Question

我有一个ExtJS4应用程序，它具有中等复杂的布局，由几个嵌套面板组成，每个面板都有border类型的布局。当我向其中一个面板添加底部工具栏时，我无法弄清楚如何摆脱存在的“双边框”。

请参阅此处的jsFiddle以获取示例：http://jsfiddle.net/5fwLz/2/

我只想弄清楚如何使“按钮”上方的边框看起来正确。非常感谢任何帮助，谢谢！

EDIT-我使用的解决方案：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/

ExtJS 4 - 添加底部工具栏后的额外边框

2 个答案: