javascript - Sencha 触摸 : update view during function

Question

这是应该发生的事情:我有一个带有标签和图标的按钮。当我点击按钮时，会发生一些 Action ，这需要一些时间。因此我想在处理过程中用一些加载图标替换按钮的图标。

普通图标:

图标替换为加载 gif:

所以在伪代码中它将是:

fancyFunction(){
   replaceIconWithLoadingIcon();
   doFancyStuff();
   restoreOldIcon();
}

但是在函数执行期间屏幕不会更新。这是我的代码:

onTapButton: function(view, index, target, record, event){
    var indexArray = new Array();
    var temp = record.data.photo_url;
    record.data.photo_url = "img/loading_icon.gif";
    alert('test1');
    /*
     * Do magic stuff
     */
}

将使用上述代码替换图标，但直到函数终止。意思是，当 alert('1') 出现时，图标尚未被替换。

我已经尝试了建议的解决方案 here没有成功。我还尝试了 view.hide()，然后是 view.show()，但这些命令也直到函数终止才执行。

如果您需要更多信息，请告诉我。我们非常欢迎任何建议。

Answer 1

我终于找到了一个在执行操作期间显示 mask 的解决方案。我的解决方案的关键在于 this website.

在我的 Controller 中我做了以下事情:

showLoadingScreen: function(){
    Ext.Viewport.setMasked({
        xtype: 'loadmask',
        message: 'Loading...'
    });
},

onTapButton: function(view, index, target, record, event){
    //Show loading mask
    setTimeout(function(){this.showLoadingScreen();}.bind(this),1);
    // Do some magic
    setTimeout(function(){this.doFancyStuff(para,meter);}.bind(this),400);
    // Remove loading screen
    setTimeout(function(){Ext.Viewport.unmask();}.bind(this),400);
},

图标的替换工作非常相似:

onTapButton: function(view, index, target, record, event){
    //Replace the icon
    record.data.photo_url = 'img/loading_icon.gif';
    view.refresh();
    // Do some magic
    setTimeout(function(){this.doFancyStuff(para,meter);}.bind(this),400);
},

doFancyStuff: function(para, meter){
    /*
     * fancy stuff
     */
    var index = store.find('id',i+1);
    var element = store.getAt(index);
    element.set('photo_url',img);
}

感谢 Barrett 和 sha 的帮助!