extjs - 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);

然后这个拆分面板被添加到我的主视图中：
```
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'
         }

score 2 · Accepted Answer

或使用事件“添加”

listeners: {
    add: function (me, item) {
        if (item.xtype == 'bordersplitter') item.width = 2;
    }
},

在这里演示http://ext4all.com/post/extjs-4-border-layout-splitter-width

score 1 · Accepted Answer

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

所以你只是看错了课程。

顺便提一句。要获得类本身的拆分器，您不需要查看oSplitPanel.layout.splitters只需查看splitter类的道具。

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

2 回答 2

Related

Reference