Sencha Touch：在功能期间更新视图

Question

以下是应该发生的事情： 我有一个带有标签和图标的按钮。 当我点击按钮时会发生一些需要一些时间的动作。因此，我希望在处理过程中用一些加载图标替换按钮的图标。

普通图标：

替换为加载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

我终于在执行操作时找到了显示遮罩的解决方案。我的解决方案的关键是this website.

在我的控制器中，我做了以下事情：

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的帮助！

Answer 2

我认为这里的主要问题是你的执行任务是在主UI线程中执行的。为了让UI线程执行动画，您需要将doFancyStuff()函数推送到http://docs.sencha.com/touch/2.2.1/#!/api/Ext.util.DelayedTask

之类的内容

请记住，只有在花哨的东西完成后才需要将它恢复为你的图标。

Answer 3

要更新任何按钮属性，请尝试访问按钮本身。使用ComponentQuery或通过控制器getter。例如：

var button = Ext.ComponentQuery.query（'button [name = YOURBUTTONNAME]'）[0]; button.setIcon（ 'IMG / loading_icon.gif'）;

该shold更新按钮的图标。

当您获得该按钮的参考时，您将可以访问Ext.Button对象的所有可用方法： http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Button-method-setIcon