ExtJS ComboBox加载并赋初值实现方法

在ExtJS中为ComboBox动态加载数据后赋初值时，因异步加载导致直接调用setValue无效。正确的做法是在store的load方法回调函数中执行setValue，确保数据加载完成后再赋值，从而避免空值错误，正确设置默认值。

在实际开发中，使用 ExtJS 的 ComboBox 组件时，经常需要动态加载数据源，并在加载完成后为组件设置默认选中值。然而，很多人容易忽略一个关键问题：数据加载是异步的。如果直接调用 setValue，往往数据尚未返回时，值就已经写入，最终导致赋值无效。

Extjs中ComboBox加载并赋初值的实现方法

比如你可能会这样写：

editCityStore.load({ 
    params: { provinceID: proid } 
});
Ext.getCmp('city-id-name').setValue(cityid);

这段代码表面上看没什么问题，但实际上当 setValue 执行时，store 还在加载途中，ComboBox 里的数据列表为空，赋值自然无法生效。等到 store 加载完毕，之前设置的值早已丢失，最终呈现给用户的便是一个空白下拉框。

那应该怎么解决？其实很简单——等待 store 真正加载完成后再进行赋值。借助 load 方法的 callback 回调函数就能轻松实现：

editCityStore.load({
    params: { provinceID: proid },
    callback: function () {
        // 数据加载完毕，此时再赋值就万无一失
        Ext.getCmp('city-id-name').setValue(cityid);
    },
    scope: editCityStore,  // 作用域指向 store 本身，回调里 this 就是 store
    add: false             // 不累加数据，替换原有数据
});

这里的关键在于：callback 函数保证在数据确实抵达客户端之后才触发，异步时序问题由此得到完美规避。另外，scope 和 add 这两个参数虽然不直接参与赋值逻辑，但能够更精确地控制 store 的行为，建议根据实际业务需求进行配置。

一句话总结：在异步加载场景下为 ComboBox 设置初始值，请务必将 setValue 放在 store 的 load 回调中。这是最为稳妥且推荐的做法。