Sencha Touch 2 - TabPanel 항목의 Ext.LoadMask 변경

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와 같은 이벤트가 필요하지만 BEFORE 후에 AFTER가 발생합니다. 누구든지 어떻게 구현할 수 있을지에 대한 아이디어가 있습니까?

업데이트 : 나는 거의 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'); 
        } 
       } 

그러나 문제는 지금 그 I는 기본 "탭을 무시하기 때문에 "이벤트 리스너는 버튼을 클릭하더라도 항상 같은 탭에 머물러 있으며 다른 탭을 표시하지 않습니다. 그러나 새 탭의 페인트 이벤트가 시작됩니다.

Answer 1

탭 이벤트에서 Ajax 또는 Json 요청을 적용 할 때 일반적으로 Ext.LoadMask을 사용하기 때문에 결과를 얻을 수 있는지 확신 할 수 없습니다.

하지만 각 패널의 tabpanel 내용이 이미로드되어 있으므로 여기에서 마스킹을 사용하면 약간의 중복 작업이 발생합니다. 당신의 activeitemchange 이벤트는 다음과 같이 해고 때, 당신은 예를 들어 1 초 가짜 마스크 로딩을 할 수 있습니다 :

그런데

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 이벤트는 탭 패널의 모든 항목을 정의 뒤에 위치해야합니다. 도움이 되었으면 좋겠다 :)