1

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

普通图标：普通图标

图标替换为加载 gif：图标替换为加载 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')出现时，该图标尚未被替换。

我已经尝试过这里建议的解决方案，但没有成功。我也尝试过view.hide()，view.show()但是这些命令在函数终止之前也没有执行。

如果您需要更多信息，请告诉我。任何建议都会受到欢迎。

4

3 回答 3

2

我终于找到了在执行操作期间显示掩码的解决方案。我的解决方案的关键是在这个网站上。

在我的控制器中，我执行了以下操作：

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

感谢您的帮助巴雷特和沙！

于 2013-06-06T07:45:31.437 回答
1

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

但请记住，只有在精美的东西完成后，您才需要将其还原为您的图标。

于 2013-06-04T21:44:09.033 回答
1

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

var button = Ext.ComponentQuery.query('button[name=YOURBUTTONNAME]')[0]; button.setIcon('img/loading_icon.gif');

这将更新您的按钮的图标。

此外，当您获得按钮的引用时，您将可以访问 Ext.Button 对象的所有可用方法： http ://docs.sencha.com/touch/2.2.1/#!/api/Ext.Button-方法集图标

于 2013-06-04T23:12:31.143 回答