Sencha Touch：功能更新視圖

以下是應該發生的事情：我有一個帶有標籤和圖標的按鈕。當我點擊按鈕時，會發生一些需要一些時間的操作。因此我想在處理過程中用一些加載圖標替換按鈕的圖標。Sencha Touch：功能更新視圖

正常圖標： Normal Icon

圖標通過加載GIF替換爲： Icon replaced by loading 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()，但是這些命令在函數終止之前也沒有執行。

讓我知道你是否需要更多信息。任何建議將遠遠超過歡迎。

來源

2013-06-04 Markus

我終於找到顯示面膜時我的行爲被執行的解決方案。我的解決問題的關鍵是在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); 
}

謝謝您的幫助，巴雷特和啥！

來源

2013-06-06 07:45:31 Markus

非常感謝！ – MinaHany

不客氣。花費我們幾天:( – Markus

我認爲這裏的主要問題是您的執行任務正在主UI線程中執行。爲了讓UI線程執行動畫，您需要將doFancyStuff()函數推入類似http://docs.sencha.com/touch/2.2.1/#!/api/Ext.util.DelayedTask

請記住，儘管如此，只有花哨的東西完成後才需要將其恢復爲圖標。

來源

2013-06-04 21:44:09 sha

非常感謝您的快速回答。即使您的建議聽起來很完美，我也會遇到一個錯誤：「無法調用未定義的方法」，因爲它在以下錯誤報告中聲明：http://www.sencha.com/forum/showthread.php?260115 -Error-with-DelayedTask-Sencha-Touch-2.2-RC – Markus

你在使用什麼版本的ST？ – sha

我們目前正在使用2.2.1 – Markus

要更新任何按鈕屬性，您應嘗試訪問按鈕本身。通過ComponentQuery或通過控制器獲取。例如：

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

shold更新您的按鈕的圖標。

還當你得到一個裁判的按鈕，你將不得不所有availble的一個Ext.Button對象的方法可以訪問： http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Button-method-setIcon

來源

2013-06-04 23:12:31 Barrett

Hi Barrett。謝謝你的快速回答。你的建議幾乎可以。當我在網頁瀏覽器中顯示結果時，其行爲與預期相同。但是，只要我將它作爲Android上的應用程序運行 - 真正的目的是什麼 - 圖標會在啓動後指出的函數執行後更新。 – Markus

Sencha Touch：功能更新視圖

回答

相關問題