使用ExtJS在Card Layout中的卡片之間切換時加載蒙板

Question

我在其中一個視圖中使用卡片佈局。卡片佈局中有6張卡片。我使用圖像點擊在卡片之間切換。由於需要一段時間才能將卡從一個切換到另一個，所以我需要在切換時添加一個加載掩碼，也就是說，當我點擊圖像時加載掩碼應該出現，並且一旦下一張卡被渲染，加載掩碼應該被移除。任何人都可以請建議我解決我面臨的加載掩碼問題？

Answer 1

爲什麼交換需要時間？是因爲商店負荷？ 如果是因爲商店，您可以在beforeLoad中顯示蒙版並隱藏在加載事件中。類似的東西：

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

我不知道你是怎麼做的應用程序。但是，如果這不能幫助，你也可以創建一個面具一個對象，然後單擊後始終顯示，您可以在意見的「畫」事件隱藏： 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); 
}});