如何程序化勾选Ext Combobox中的Alabama复选框？

问题根源 #

你调用Ext.getCmp('multiComboBox').select('Alabama')时，组件的选中值会更新，但存在两个核心问题：

• 该调用默认不会触发select事件，导致你写的监听器代码无法执行，复选框不会被勾选
• 自定义模板中的复选框未与组件的选中状态绑定，无法自动同步

方案一：触发select事件同步复选框 #

调用select方法时传入triggerEvent: true参数，强制触发select监听器，让现有代码生效：

// 方式1：通过record选中并触发事件
var combo = Ext.getCmp('multiComboBox');
// 从store中获取Alabama对应的记录
var alabamaRecord = combo.getStore().findRecord('name', 'Alabama');
// 第二个参数true表示保留已有选中项（适配multiSelect场景），第三个参数触发select监听
combo.select(alabamaRecord, true, true);

或者直接传字符串时指定触发事件：

// 方式2：传字符串时触发事件
Ext.getCmp('multiComboBox').select('Alabama', true, true);
// 参数说明：第三个参数triggerEvent设为true，强制触发select监听器

方案二：优化模板，自动同步复选框状态 #

修改自定义模板，让复选框根据组件选中状态自动渲染，无需依赖监听器：

tpl: new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="x-boundlist-item">',
            // 通过模板自定义方法判断当前项是否被选中
            '<input type="checkbox" {[this.isChecked(values.name)]} />',
            '{name}',
        '</div>',
    '</tpl>',
    {
        isChecked: function(itemName) {
            var combo = Ext.getCmp('multiComboBox');
            // 获取已选中的所有记录
            var selectedRecords = combo.getSelectedRecords();
            // 判断当前项是否在选中列表中
            for (var i = 0; i < selectedRecords.length; i++) {
                if (selectedRecords[i].get('name') === itemName) {
                    return 'checked';
                }
            }
            return '';
        }
    }
),

这种方式下，不管是手动选择还是程序化调用select，下拉框中的复选框都会自动同步选中状态。

额外提示 #

• 尽量避免使用Ext.getCmp，Ext JS 5+推荐使用reference配置获取组件，代码更优雅
• 若需要在程序化选中后立即刷新下拉框显示，可调用combo.getPicker().refresh()

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