ExtJs - 边框布局 - 拆分器配置

Question

我的面板与 border布局如下所示:

var oSplitPanel = Ext.create('Ext.panel.Panel', {
 lid   : 'splitpanel',
 layout: 'border',
 border: 0,
 style: { border: 0 }
 height: 150,
 items: [{
   split: true,
   flex: 1,
   region: 'west',
   xtype: 'panel',
   lid: 'panelwest',
   layout: 'fit',
   minWidth: 200
 }]
});

然后另一个面板被添加到这个 west区域面板:

oSplitPanel.query('[lid=panelwest]')[0].add(oExplorerPanel);

然后这个拆分面板被添加到我的主 View 中:

that.getView().add(oSplitPanel);

然后在另一个函数中，我添加了 center面板:

var oAddPanelRight = {
       split: true,
       flex: 3,
       region: 'center',
       xtype: 'panel',
       lid: 'panelcenter',
       layout: 'fit',
       border: 0
    };

oSplitPanel.add(oAddPanelRight);

问题:

一切都以这种方式完美运行，但是 我想改变(限制)分离器自身的宽度 (此分隔符位于 west 和 center 面板之间以调整其宽度)。

我试过的:

尝试更改拆分器的宽度:

 listeners: {
    afterrender: function() {
       // error following, 'splitters' does not exist
       oSplitPanel.layout.splitters.west.setWidth(1);
       oSplitPanel.doLayout();
    }
 }

为 center 添加负边距面板:

         // Tried this:
         margin: '0 0 0 -4'

         // And that:
         style: {
            border: 0,
            marginLeft: '-3px'
         }

Answer 1

您的 oSplitPanel 对象/实例没有将拆分参数设置为 true，因此没有应用拆分器。拆分器应用于 oAddPanelRight 对象/实例和 oSplitPanel 的嵌套面板，也可能应用于您稍后添加的面板。不能这么说。

所以你只是看错了类(class)。

顺便说一句。要获得类本​​身的拆分器，您不需要查看 oSplitPanel.layout.splitters看看 splitter类(class)的支柱。