使用ExtJS在卡片布局中的卡片之间切换时加载掩码

Question

我在我的一个视图中使用了卡片布局。在卡片布局中有6张卡片。我使用图像点击在卡片之间切换。因为卡从一个切换到另一个需要一些时间，所以我需要在切换时添加加载掩码，即，当我单击图像时，加载掩码应该会出现，并且一旦下一张卡被渲染，加载掩码就应该被移除。有没有人能给我提个建议，解决我面临的加载掩码问题？

Answer 1

为什么切换要花时间？是因为存储加载吗？如果是因为存储，你可以在beforeLoad中显示掩码，在load事件中隐藏。大概是这样的：

Ext.define('MyApp.store.MyStore', {
...
myMask: null,
listeners: {
    beforeload: function(store, operation, options){
        this.myMask = new Ext.LoadMask(Ext.getBody(), {
            cls: "loader",
            msg: "Loading..."
        });
        this.myMask.show();
    },
    load: function(store, records, success, operation, options){
        this.myMask.hide();
    }
});

我不知道你是怎么做这个应用的。但是，如果这不能解决问题，您还可以创建一个带有掩码的对象，并在单击后始终显示，您还可以隐藏在视图的"painted“事件中：http://docs.sencha.com/touch/2.2.0/#!/api/Ext.navigation.View-event-painted

编辑过的

因此，您可以重写Store以始终在加载时显示de mask。代码如下：

Ext.define('MyAppName.store.App', {
override: 'Ext.data.Store',

timeOut: null,

// List of stores that run in background (dont show mask)
backgroundStores: [
    'StoreOne',
    'StoreTwo'
],

constructor: function(config){
    this.callParent(arguments);
    this.on('beforeload', 'onBeforeLoad', this);
    this.on('load', 'onAfterLoad', this);
},

onBeforeLoad: function(store, operation, options){
    // runing in background
    if(this.backgroundStores.indexOf(store._storeId) != -1){
        return;
    }

    var re = new RegExp("MyAppName");
    // Fix a feature of sencha that do some request from store off app
    if(store._model == undefined || store._model.$className == undefined || re.exec(store._model.$className) == null){
        return;
    }

    MyAppName.app.config.mask.show(); // this is my mask defined in App.js

    // timout
    this.timeOut = setTimeout(function() {
        Ext.Msg.alert("Erro", "Could not connect to the server");
        MyAppName.app.config.mask.hide();
    }, 30000);
},
onAfterLoad: function(store, records, success, operation, options){
    if(this.backgroundStores.indexOf(store._storeId) != -1){
        return;
    }

    var re = new RegExp("MyAppName");
    if(store._model == undefined || store._model.$className == undefined || re.exec(store._model.$className) == null){
        return;
    }
    MyAppName.app.config.mask.hide();
    window.clearInterval(this.timeOut);
}});