ExtJS 7.6网格中ComboBox下拉列表宽度调整问题求助

方法一：通过pickerConfig直接配置下拉框宽度 #

在Sencha Architect里，给你的ComboBox添加pickerConfig配置项，就能直接控制下拉选择器的宽度，无需修改组件本身：

editor: {
    xtype: 'combobox',
    itemId: 'mycombobox2',
    editable: false,
    displayField: 'title',
    queryMode: 'local',
    store: 'StatiOfOrdersStore',
    valueField: 'id',
    // 新增下拉框配置
    pickerConfig: {
        matchFieldWidth: false, // 关闭下拉框与输入框同宽的默认行为
        width: 300, // 固定宽度，可根据需求调整数值
        // 若要自适应最长选项，替换width为以下两行：
        // grow: true,
        // growToLongestValue: true
    }
}

matchFieldWidth: false是核心设置，默认下拉框会和网格列里的输入框同宽，关掉后才能自定义宽度。

方法二：监听expand事件动态计算宽度 #

如果自适应配置不生效，可通过下拉展开事件动态计算最长选项的宽度，再设置给下拉框：
在Sencha Architect中找到该ComboBox，添加expand事件处理器，代码如下：

expand: function(combo) {
    var picker = combo.getPicker();
    if (!picker) return;

    let maxWidth = 0;
    // 遍历所有选项，计算最长文本宽度
    picker.items.each(function(item) {
        const textWidth = item.getTextWidth();
        maxWidth = textWidth > maxWidth ? textWidth : maxWidth;
    });
    // 加边距避免内容截断
    picker.setWidth(maxWidth + 20);
}

方法三：用CSS强制设置宽度 #

若不想修改JS代码，可通过CSS定位下拉框并设置固定宽度：

1. 在项目CSS文件中添加：

.x-boundlist.my-custom-picker {
    width: 300px !important;
}

2. 给ComboBox的pickerConfig添加自定义类名：

editor: {
    xtype: 'combobox',
    // ... 其他配置
    pickerConfig: {
        cls: 'my-custom-picker'
    }
}

内容的提问来源于stack exchange，提问作者Tech-Maou