如何在渲染下一个组合框之前执行 stored.load 方法

Question

我有一个三个依赖的下拉菜单。

ex : 国家和城市。

我选择国家，会出现州，然后我选择州会出现城市。这是工作正常的创建流程。

现在在编辑流程中，我面临一个问题。在渲染时，我正在调用正在执行的加载存储方法，但它是针对州和国家/地区而不是针对国家/地区执行的。有什么办法可以延迟国家/地区的 store.load 以便它执行国家/地区，然后执行州和城市。

我的代码是

rendercombo: function () {
        let _this = this,
            combo = _this.getView(),
            comboName = combo.name;
        // Edit case flow. 
       // Some code
        
        if (!Ext.isEmpty(combo.getValue())) {
                let extraPramConfig = combo.extraconfig;
                combo.extraconfig.selectedValue = combo.getValue();
                _this.loadDropdownStore(extraPramConfig);
            }
        }
    },
    


loadComboStore : function(config){
    let _this = this;
        combo = _this.getView(),
            store = combo.getStore();
    store.getProxy().setExtraParams(config);
    // Here I want to execute my first combo then second and third
        store.load({
                callback: function (records) {
                    console.log(records);
                }
        });
    }

在这里我想执行我的第一个组合，然后是第二个和第三个。任何有效的解决方案

Answer 1

对于这样的事情，我喜欢依靠 async/await，所以我假设这就是你所要求的。如果您使用 Sencha Cmd 并将其转换为 ES5（或者您不关心浏览器兼容性），那么这应该可以工作。现在显然你不应该完全使用它，因为它是一个快速测试用例，展示了如何使用 async/await...你应该将它们包装在 try..catch 中并让它更漂亮一点，但这里是 example Fiddle 和代码：

// Extending the idea of Ext.Deferred from
// https://docs.sencha.com/extjs/7.2.0/classic/Ext.Deferred.html
Ext.define('StoreOverride', {
    override: 'Ext.data.Store',

    loadAsync: function (config) {
        var deferred = new Ext.Deferred();
        config = config || {};
        // Override any callback, as we'll return the results in the await
        config.callback = function (records, operation, success) {
            if (success) {
                deferred.resolve({
                    records: records,
                    operation: operation
                });
            } else {
                deferred.reject("Error loading Companies.");
            }
        }
        this.load(config);
        return deferred;
    }
});

Ext.create('Ext.container.Viewport', {
    layout: {
        type: 'vbox'
    },
    viewModel: {
        data: {
            value1: null,
            value2: null,
            value3: null
        },
        stores: {
            store1: {
                fields: ['Name'],
                proxy: {
                    type: 'ajax',
                    url: 'data1.json'
                }
            },
            store2: {
                fields: ['Name'],
                proxy: {
                    type: 'ajax',
                    url: 'data2.json'
                }
            },
            store3: {
                fields: ['Name'],
                proxy: {
                    type: 'ajax',
                    url: 'data3.json'
                }
            }
        }
    },
    items: [{
        xtype: 'combo',
        fieldLabel: 'Combo 1',
        displayField: 'Name',
        queryMode: 'local',
        bind: {
            store: '{store1}',
            value: '{value1}'
        }
    }, {
        xtype: 'combo',
        fieldLabel: 'Combo 2',
        displayField: 'Name',
        queryMode: 'local',
        bind: {
            store: '{store2}',
            value: '{value2}'
        }
    }, {
        xtype: 'combo',
        fieldLabel: 'Combo 3',
        displayField: 'Name',
        queryMode: 'local',
        bind: {
            store: '{store3}',
            value: '{value3}'
        }
    }],
    listeners: {
        afterrender: async function(view) {
            var vm = view.getViewModel();
            var stores = [
                vm.getStore('store1'),
                vm.getStore('store2'),
                vm.getStore('store3')
            ];
            view.setLoading(true);
            for (var i = 0; i < stores.length; i++) {
                var deferred = stores[i].loadAsync();
                console.log(`loading store ${i+1}`);
                var result = await deferred.promise;
                console.log(`done loading store ${i+1}`, result);
            }
            view.setLoading(false);
        }
    }
});