Extjs ComboBox加载与赋初值实现方法

ExtJS ComboBox加载并赋初值的正确方法

在实际开发中，使用 ExtJS 的 ComboBox 时，经常需要动态加载数据源，并在加载完成后给组件设置一个默认值。但这里有个很容易踩的坑：数据加载是异步的，如果你直接调用 setValue，往往数据还没回来，值就已经“先进去”了，结果当然是不对的。

比如你可能会这样写：

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

表面看没毛病，但实际上 setValue 执行时，store 还在路上，ComboBox 里的数据列表为空，赋值自然就无效了。等 store 加载完，值已经丢了，你看到的就是一个空白的下拉框。

解决方案：利用 callback 回调函数

那怎么办？很简单——等 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 回调里。这是最稳妥的做法。