Sencha Touch：功能期间更新视图

Posted 2023-02-26

【中文标题】Sencha Touch：功能期间更新视图

【英文标题】：Sencha Touch: update view during function

【发布时间】：2013-06-04 21:25:09

【问题描述】：

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

普通图标：

图标替换为加载 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()，但这些命令直到函数终止后才执行。

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

【参考方案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 的帮助！

【讨论】：

非常感谢！

【参考方案2】：

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

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

【讨论】：

非常感谢您的快速回答。即使您的建议听起来很完美，我也会遇到错误：cannot call method 'apply' of undefined，正如以下错误报告中所述：sencha.com/forum/…

你用的是什么版本的ST？

我们目前使用的是 2.2.1

【参考方案3】：

要更新任何按钮属性，您应该尝试访问按钮本身。使用 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-method-setIcon

【讨论】：

嗨，巴雷特。也感谢您的快速回答。你的建议有效......几乎。当我在网络浏览器中显示结果时，行为符合预期。但是，一旦我将它作为 android 上的应用程序运行 - 真正的目的是什么 - 图标会在函数执行后更新，如开始帖子中所指出的那样。