ExtJS 3.4.1.1：如何在hbox布局中实现双面板可调整大小？

可以实现，核心是不要直接修改面板尺寸，而是通过更新flex值让HBox布局自动处理空间分配——之前的问题是手动updateBox破坏了布局系统的计算逻辑，导致面板重叠或消失。

实现思路 #

1. 给每个面板只添加左右方向的调整手柄（避免上下调整干扰横向布局）
2. 调整面板宽度时，计算当前面板的宽度占总容器宽度的比例，更新自身和另一个面板的flex值
3. 触发父容器重新布局，让HBox根据新的flex值分配空间，实现同步调整

完整代码示例 #

var panel1 = Ext.create('Ext.Panel', {
    title: 'Navigation',
    flex: 2,
    resizable: true,
    listeners: {
        render: function(p) {
            new Ext.Resizable(p.getEl(), {
                handles: 'e', // 只保留右侧调整手柄，避免和另一个面板的手柄冲突
                pinned: true,
                transparent: false,
                onResize: function() {
                    var parentCt = p.ownerCt;
                    var totalWidth = parentCt.getWidth();
                    var currentWidth = p.getWidth();
                    // 计算flex占比，同步更新另一个面板的flex值
                    var panel2 = parentCt.items.get(1);
                    var newFlex1 = currentWidth / totalWidth;
                    var newFlex2 = 1 - newFlex1;
                    
                    p.flex = newFlex1;
                    panel2.flex = newFlex2;
                    // 触发父容器重新布局
                    parentCt.doLayout();
                }
            });
        }
    }
});

var panel2 = Ext.create('Ext.Panel', {
    title: 'Content',
    flex: 3,
    resizable: true,
    listeners: {
        render: function(p) {
            new Ext.Resizable(p.getEl(), {
                handles: 'w', // 只保留左侧调整手柄
                pinned: true,
                transparent: false,
                onResize: function() {
                    var parentCt = p.ownerCt;
                    var totalWidth = parentCt.getWidth();
                    var currentWidth = p.getWidth();
                    var panel1 = parentCt.items.get(0);
                    var newFlex2 = currentWidth / totalWidth;
                    var newFlex1 = 1 - newFlex2;
                    
                    p.flex = newFlex2;
                    panel1.flex = newFlex1;
                    parentCt.doLayout();
                }
            });
        }
    }
});

Ext.create('Ext.Panel', {
    renderTo: Ext.getBody(),
    layout: 'hbox',
    layoutConfig: {
        align: 'stretch' // 让面板高度铺满父容器
    },
    width: 800,
    height: 400,
    items: [panel1, panel2]
});

关键说明 #

• 每个面板只保留单侧调整手柄（第一个右侧、第二个左侧），避免手柄重叠冲突
• 通过onResize事件实时计算flex比例，让HBox布局系统自动分配空间，不会出现面板消失或重叠问题
• 必须调用父容器的doLayout()触发重绘，确保flex值更新后立即生效

内容的提问来源于stack exchange，提问作者FrenkyB