使用ExtJS在卡布局中的卡之间切换时加载掩码
我正在我的一个视图中使用卡片布局。卡片布局中有6张卡片。我使用图像点击在卡之间切换。由于卡从一张切换到另一张需要一些时间,因此我需要在切换时添加加载掩码,即,当我单击图像时,加载掩码应该出现,并且在渲染下一张卡时,加载掩码应该被移除。有谁能给我建议一个解决我所面临的加载掩码问题的方法吗 为什么切换需要时间?是因为商店的货物吗? 如果是因为存储可以在加载前显示掩码并在加载中隐藏事件。诸如此类:使用ExtJS在卡布局中的卡之间切换时加载掩码,extjs,Extjs,我正在我的一个视图中使用卡片布局。卡片布局中有6张卡片。我使用图像点击在卡之间切换。由于卡从一张切换到另一张需要一些时间,因此我需要在切换时添加加载掩码,即,当我单击图像时,加载掩码应该出现,并且在渲染下一张卡时,加载掩码应该被移除。有谁能给我建议一个解决我所面临的加载掩码问题的方法吗 为什么切换需要时间?是因为商店的货物吗? 如果是因为存储可以在加载前显示掩码并在加载中隐藏事件。诸如此类: Ext.define('MyApp.store.MyStore', { ... myMask: null
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();
}
});
我不知道你是怎么做的应用程序。但如果这样做无济于事,您也可以创建一个带有遮罩的对象,并在单击后始终显示,您可以隐藏在视图的“绘制”事件中:
[已编辑]
因此,您可以覆盖存储以在加载时显示反掩码。
代码如下:
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);
}});
嗨,史考普,谢谢你的回答。是的,我在用商店的货。存储加载需要时间,因为我在图表上绘制了大约7个月的数据,7个月的数据非常庞大。我添加了一些代码来覆盖数据。存储到away在加载时显示掩码。你可以改进你的逻辑。