Sencha Touch 2 - Ext.LoadMask при изменении позиции TabPanel

Question

Если я хочу отображать маску загрузки на вкладке между изменениями вкладок в Sencha Touch 2. Какой будет правильный подход?

Я хочу показать маску загрузки при нажатии кнопки вкладок и скрыть ее, как только панель отобразится правильно.

Ext.define("MyProject.view.Main", { 
    extend: 'Ext.tab.Panel', 
    requires: [ 
     'Ext.TitleBar','Ext.MessageBox' 
    ], 
    config: { 
     fullscreen: true, 
     tabBarPosition: 'bottom', 
     layout: { 
      type: 'card', 
      animation: 'fade' //false, fade, flip, pop, scroll, slide 
     }, 

     items: [ 
      { 
       xtype: 'panel1', 

       masked: { 
        xtype:'loadmask',       
        message:'Chargement...' 
       }, 

       listeners: { 
        painted: function(container, value, oldValue, eOpts) { 
         //Ext.Msg.alert('Test', 'painted'); 
         this.setMasked(false); 
        } 
       } 
      }, 
       { 
       xtype: 'panel2', 

       masked: { 
        xtype:'loadmask',       
        message:'Chargement...' 
       }, 

       listeners: { 
        painted: function(container, value, oldValue, eOpts) { 
         //Ext.Msg.alert('Test', 'painted'); 
         this.setMasked(false); 
        } 
       } 
      }, 

Проблема заключается в том, что событие в ловушке, но так как я показываю маску на создание вещи ребенка, маска не отображается. Мне нужно событие, например onActiveItemChanged, но уволено ПЕРЕД, а не ПОСЛЕ. У кого-нибудь есть идея о том, как я могу это реализовать?

UPDATE: Я почти сделал это с добавлением кода, найденного на форуме Sencha Touch. Добавлено в главном окне (вкладка панели) Уровень:

listeners: { 
      delegate : 'tabbar > tab', 
      tap : function() { 
       Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true}); 
      } 
     } 

И затем, по каждому пункту я добавить в закладки панеле:

xtype: 'panel1', 

       listeners: { 
        painted: function(container, value, oldValue, eOpts) { 
         Ext.Viewport.setMask('false'); 
        } 
       } 

Но сейчас проблема в том, что, так как я переопределить «Tap по умолчанию «прослушиватель событий, он всегда остается на одной вкладке и никогда не отображает других, даже если мы нажмем на кнопку. Тем не менее, раскрашенное событие новой вкладки запускается.

Answer 1

Я не уверен, что вы можете добиться такого результата или нет, потому что обычно я использую Ext.LoadMask при применении запроса Ajax или Json в событии крана.

Но в вашем случае содержимое вкладки каждой панели уже загружено, поэтому я чувствую себя немного избыточной задачей, когда вы используете маскировку здесь. Тем не менее, вы можете сделать поддельную маску загрузки, например, за одну секунду, когда ваш activeitemchange событие выстрелил так:

listeners: { 
activeitemchange:function(){ 
    function setMask() { 
     Ext.Viewport.mask({ xtype: 'loadmask', message: 'Chargement...' }); 
    } 

    function unMask() { 
     Ext.Viewport.unmask(); 
    } 

    function start() { 
     setMask(); 
     setTimeout(unMask, 1000); // execute the mask in 1 second 
    } 

    start(); 
}}; 

Кстати, это событие activeitemchange должны быть размещены после вы определили все пункты в tabpanel. Надеюсь, это поможет :)