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

Posted 2023-02-26

【中文标题】ExtJs - 边框布局 - 拆分器配置

【英文标题】：ExtJs - border layout - splitter config

【发布时间】：2012-11-13 10:59:17

【问题描述】：

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'
         

【参考方案1】：

或者使用事件“添加”

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

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

【参考方案2】：

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

所以你只是看错了课程。

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

【讨论】：

谢谢。它现在可以通过将监听器添加到我的初始面板 west: using listeners: afterrender: function() this.splitter.width = 1; oSplitPanel.doLayout();

@Indianer 不客气！ :) 我添加了一些关于拆分器参考的小注释