ExtJS 3.4中如何为绑定Json数据源的ComboBox设置默认选中值

问题根因 #

• 你使用mode: 'remote'的异步加载Store，组件afterrender事件触发时，Store还未完成数据请求，没有对应记录无法完成选中关联
• 之前设置的value: 'Standard'是displayField对应的显示文本，但ComboBox默认按valueField: 'BIN_ID'匹配值，类型不匹配导致仅能显示文本无法关联选中记录

可行实现方案 #

最稳妥的方式是监听Store的load事件，等数据加载完成后再执行赋值选中操作，修改后的代码如下：

1. 给JsonStore添加load监听 #

var hatComboStore = new Ext.data.JsonStore({
    autoLoad: true,
    fields: [
        'BIN_ID',
        'BIN_DESC'
    ],
    baseParams: {
        method: 'post'
    },
    url: 'json_bin_hat.php',
    listeners: {
        load: function(store, records) {
            // 标记位避免重复加载时重复赋值
            if (hatCombo.defaultSelected) return;
            // 按显示文本匹配对应记录
            var targetRecord = store.findRecord('BIN_DESC', 'Standard');
            if (targetRecord) {
                // 传入valueField对应的值完成选中
                hatCombo.setValue(targetRecord.get('BIN_ID'));
                // 手动触发联动逻辑，给下级binCombo传参
                binCombo.store.baseParams.hat = targetRecord.get('BIN_ID');
                hatCombo.defaultSelected = true;
            }
        }
    }
});

原有afterrender监听中获取combo.getValue()的逻辑执行时Store未加载完成，拿到的是空值，现在已经在Store的load事件中完成了联动参数赋值，可以删除afterrender内的对应逻辑避免冲突。

2. 可选优化配置 #

如果需要严格限制只能选择数据源内的选项，可将ComboBox的forceSelection属性改为true，避免用户输入无效值：

var hatCombo = new Ext.form.ComboBox({
    // ...其他原有配置不变
    forceSelection: true,
    // ...其他原有配置不变
});

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