ExtJS容器布局导致多选下拉框组件选择选项时异常

嘿，我之前在ExtJS里做类似的横向布局时也碰到过一模一样的问题！从你描述的情况和代码片段来看，问题大概率出在容器高度限制和下拉面板的溢出/层级设置上，咱们一步步来解决：

1. 先排查固定高度的问题 #

你代码里主容器设置了height: 45，这个高度刚好够组件的输入框部分，但多选下拉框展开时，它的下拉面板需要超出当前容器的高度显示——如果容器高度固定且overflow默认是hidden或auto，下拉面板就会被截断或者显示异常。

建议先把主容器的固定高度去掉，改成height: 'auto'，或者让容器通过flex自适应父容器空间：

var $cls = NS.AAA = function(cfg) {
    $cls.superclass.constructor.call(this, Ext.apply({
        // 去掉固定height，换成auto或者flex
        height: 'auto',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            layout: {
                type: 'hbox',
                pack: 'start'
            },
            overflow: 'visible', // 关键：让内部容器允许内容溢出
            items: [
                // 下拉框
                {xtype: 'combobox', ...},
                // 多选下拉框
                {xtype: 'multiselect', ...},
                // 文本框
                {xtype: 'textfield', ...}
            ]
        }]
    }, cfg));
};

2. 给多选下拉框配置下拉面板属性 #

默认情况下，多选下拉框的下拉面板会继承输入框的宽度，并且可能被容器裁剪，咱们给它加几个关键配置：

{
    xtype: 'multiselect', // 或者你用的多选组件类型，比如'combo'加multiSelect: true
    multiSelect: true,
    matchFieldWidth: false, // 让下拉面板宽度不局限于输入框
    listConfig: {
        maxHeight: 250, // 设置下拉面板的最大高度，超出自动滚动
        overflowY: 'auto',
        style: {
            zIndex: 9999 // 确保下拉面板在最上层，不被其他组件覆盖
        }
    }
}

3. 确保容器的溢出属性设置正确 #

不管是主vbox容器还是内部hbox容器，都要把overflow设为visible，这样下拉面板才能突破容器边界正常显示：

// 主容器配置
overflow: 'visible',
// 内部hbox容器配置
items: [{
    layout: 'hbox',
    overflow: 'visible',
    ...
}]

为什么会出现这种异常？ #

ExtJS的容器如果设置了固定高度，默认会把超出容器的内容裁剪掉（overflow: hidden），而多选下拉框的面板是作为浮层渲染的，但如果父容器的overflow不是visible，浮层会被当成容器内的内容裁剪，就会出现你动图里的异常情况。

按照上面的步骤调整后，应该就能解决多选下拉框展开时的显示问题了！

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