在ExtJS borderlayout中移动拆分器的奇怪行为

Question

我有一个带有Borderlayout的视口。在center和west之间有一个分割器。当我将分离器向右移动时，它会获得一个新位置，但它会扰乱我的整个布局：

在移动之前，它看起来像这样：

移动后（不是在移动时！），分离器被隐藏＆＃34;并且仅当我将鼠标悬停在新位置时才可见。看右边 - 有一个新的不必要的边距：

当我将分割器向左移动（仅几个像素）时，新布局正确应用！

如果您需要代码，我在这里设置了带有边框布局的面板。如果您需要更多，我会立即提供。

Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires: [ // ...
],
layout: {type: 'border'},
items: [{
        region: 'north',
        height: 50,
        collapsible: false,
        frameHeader: false,
        html: '<a href="/">Main</a>'
    },{
        region: 'west',
        xtype: 'panel',
        title: 'west',
        collapsible: true,
        resizable: true,
        frame: true,
        border: false,
        width: 250,
        layout: 'fit',
        tools: [ // ...
        ],
        items: [{
            xtype: 'workoutlist'
        }]
    },{
        region: 'center',
        title: 'center',
        xtype: 'centerView'
}]

});

Answer 1

感谢@Evan Trimboli我已将resizable: true替换为split: true，这有助于解决另一个问题。

问题的真正原因在于centerView：

Ext.define('MyApp.view.CenterView', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.centerView',
    enableTabScroll: true,
    layout: 'fit',
    // constrain: true, <-- this configuration option caused the weird behaviour
    autoShow: true,

    // ...

});

我不知道选项 constrain: true 如何进入此视图（可能是一些愚蠢的复制和粘贴错误）。没有，它就像一个魅力。