延迟呈现UI，直到在ExtJs中加载存储

Question

我想要加载的存储在身份验证和获取数据(海量)方面花费了大量时间，并且我需要根据条件从存储中选择一个字段作为默认字段。由于存储需要很长时间(8-10秒)，而且UI已经呈现，所以设置值会突然出现，这很烦人。

我的商店定义为：

var profileStore = Ext.create('Ext.data.Store', {
        id: 'profileStore ',
        method: 'GET',
        proxy: new Ext.data.HttpProxy({
            url: url,
            reader: new Ext.data.JsonReader({
                name: 'name',
                fields: 'fields'
            })
        })
    });

加载过程如下所示：

profileStoreData = profileStore.load({
            callback: function(cmp) {
               //logic for setting default field
            }
        });
viewModel.set('profileStoreStored', profileStoreData);

我能做什么来延迟渲染UI直到这个逻辑被执行？

Answer 1

我认为您可以在Ext.app.Application init()方法中手动加载所有必需的数据

应用程序启动时调用的模板方法。它是在Ext.app.Application的启动函数执行之前调用的，因此在创建Viewport之前提供了一个钩点来运行任何代码。

通过异步ajax请求(使用带有async: false选项的Ext.Ajax requiest()方法)并手动将数据加载到存储中。

在我的应用程序中，当加载所有必要的数据时，我使用带有“loading...”的掩码。文本，并在所有准备工作完成后在Ext.app.Application init()中将其删除。