如何在呈现下一个组合框之前执行store.load方法

问题描述

我有三个依赖项。

ex：国家/地区和城市。

我选择国家/地区，然后将显示州，然后选择城市。这是创建流程，效果很好。

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

我的代码是

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);
                }
        });
    }

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

解决方法

对于这样的事情，我喜欢依靠异步/等待，所以我假设这就是您要的。如果您使用Sencha Cmd并将其移植到ES5（或者您不关心浏览器兼容性），那么这应该可以工作。现在显然您不应该完全使用它，因为它是一个快速的测试案例，展示了如何使用异步/等待...您应该将它们包装在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'],url: 'data2.json'
                }
            },store3: {
                fields: ['Name'],url: 'data3.json'
                }
            }
        }
    },items: [{
        xtype: 'combo',fieldLabel: 'Combo 1',displayField: 'Name',queryMode: 'local',bind: {
            store: '{store1}',value: '{value1}'
        }
    },{
        xtype: 'combo',fieldLabel: 'Combo 2',bind: {
            store: '{store2}',value: '{value2}'
        }
    },fieldLabel: 'Combo 3',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);
        }
    }
});