我有一个包含大量数据的网格,用户可以使用组合框过滤或显示/隐藏列组。有些列开关需要很长时间才能加载,我想在网格或组合框上调用setLoading(true,true),向用户显示浏览器正在工作。
我有一个侦听器函数,当用户在组合框上进行选择时调用它。在开始任何需要一段时间才能执行的代码之前,我调用combo.setLoading(true,true)。然后在函数的最底部调用combo.setLoading(false,false)。
加载只在两个setLoading调用之间的代码被执行后的一瞬间显示。如果我取消了删除加载图标的调用,图标仍然只在代码执行后显示。
有人知道发生了什么事吗?这对我来说很奇怪。
categorycomboselect: function(combo, records){
combo.setLoading(true,true);
var panel = combo.up('panel');
console.log(panel);
var category = records[0].data.name;
var grid = Ext.ComponentQuery.query('grid')[1];
Ext.suspendLayouts();
grid.suspendedLayout=true;
var columns = grid.columns;//.getView().getGridColumns();
//slow code that shows/hides columns
grid.suspendedLayout=false;
Ext.resumeLayouts(true);
combo.setLoading(false,false);
},
这是我的代码与Trimboli的建议,它仍然不工作。我正在显示/隐藏基于其ID中的字符串的列。我这样做是因为我想要显示/隐藏列的类别是动态的,列也是动态的。
categorycomboselect: function(combo, records){
combo.setLoading(true,true);
setTimeout( function(){
var panel = combo.up('panel');
var category = records[0].data.name;
var grid = Ext.ComponentQuery.query('grid')[1];
Ext.suspendLayouts();
grid.suspendedLayout=true;
var columns = grid.columns;
if(category=='All grade items'){
for(var i = 0; i< columns.length; i++){
columns[i].setVisible(true);
}
}else{
for(var i = 0; i< columns.length; i++){
columns[i].hide();//setVisible(false);
if(!(typeof columns[i].itemId ==='undefined')){
if((columns[i].itemId).indexOf(category)>=0){
columns[i].show();
}
}
}
}
grid.suspendedLayout=false;
Ext.resumeLayouts(true);
combo.setLoading(false,false);
},1);
},
还有,我不确定是否
Ext.suspendLayouts();
grid.suspendedLayout=true;
是否做同样的事情。
你实际上在做的是:
showMask();
for (i = 0; i < 10000000; ++i) {
// busy loop
}
hideMask();
如果你显示/隐藏一个掩码而没有给浏览器一个"break"来更新DOM,你将看不到任何东西,因为一旦你把控制权交还给浏览器,它就会在最后被刷新。
如果您想让掩码实际显示,则需要在继续执行忙循环之前稍微延迟一下:
showMask();
setTimeout(function() {
// Busy stuff
hideMask();
}, 1);