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 и ша!

Answer 2

Я думаю, что основная проблема заключается в том, что ваша задача выполнения выполняется в основном потоке пользовательского интерфейса. Чтобы позволить анимации пользовательского интерфейса делать анимацию, вам нужно нажать 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/load_icon.gif');

, который обновил значок вашей кнопки.

также, когда вы получаете реф на кнопку вы будете иметь доступ ко всем методам экранных на объект Ext.Button: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.Button-method-setIcon