Ext JS 多resizable、collapsable面板statistik拉伸异常问题

搭建的Ext JS多面板布局中，包含多个支持尺寸调整（resizable）、折叠收起（collapsable）的面板，布局结构可参照对应Sencha Fiddle示例的实现逻辑校验。实际交互异常为：先手动拖拽调整左侧面板尺寸，再拖拽调整右侧面板尺寸时，命名为statistik的中间面板无法正确拉伸适配剩余空间。

问题产生原因 #

这类问题是Ext JS开发中多面板自适应布局的常见断层问题，核心诱因不存在复杂的逻辑错误，基本都是配置链路的衔接问题：

• 事件触发层级不匹配：给左右侧面板加的resizable是挂载在面板实例上的插件能力，拖拽修改面板宽度的时候，操作是直接修改DOM尺寸的，不会自动把变更事件同步给父容器的布局引擎，引擎感知不到尺寸变化，自然不会重新计算中间面板的适配宽度。
• 中间面板配置缺失：statistik面板大概率没有配置flex弹性占比，初始写死了固定宽度，没有绑定父容器的剩余空间计算规则，左右边栏改完宽度后，没有规则指引它主动适配剩下的空间。
• 尺寸缓存错位：第一次拖动左侧面板的时候，没有主动刷新布局缓存，引擎存储的还是最开始的旧尺寸快照，等第二次拖动右侧面板的时候，引擎用旧的左侧面板尺寸计算剩余空间，自然算出来的中间面板宽度是错的，没法正确拉伸。

修正方案 #

• 先理清楚组件层级：把左侧可调整面板、statistik中间面板、右侧可调整面板全部放在同一个父容器的直接子节点下，不要在中间套带固定宽高的嵌套容器，不然布局计算的链路直接被隔断，调整其他配置也无法生效。
• 给父容器配置hbox布局，左右两侧的边栏面板设置固定的初始宽度，给statistik面板配置flex: 1，明确它的宽度就是父容器总宽度扣掉左右边栏宽度后的剩余值。
• 给左右面板的resizable配置补全resize事件监听，拖拽改尺寸的时候主动触发布局引擎重算，参考代码逻辑：

  resizable: {
    handles: 'e', // 左侧面板拉右侧的手柄，右侧面板拉左侧的手柄
    listeners: {
      resize: function() {
        // 定位到最外层的主布局容器，强制刷新布局
        this.up('panel[reference=mainLayout]').updateLayout();
      }
    }
  }
  

• 把折叠操作的联动补上：可折叠面板收起、展开的动作触发时，也要调用同样的updateLayout()方法，不然折叠状态存储的尺寸和手动拖动的尺寸混在一起，后续还是会出现适配错位的问题。

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