Sencha Tabpanel 용 메인 컨트롤러에 글로벌로드 마스크를 추가하는 방법은 무엇입니까?

Question

내 tabpanel 기반 응용 프로그램은 거의 끝났지 만, 내 tabpanel의 각 탭에 나타나는 전역로드 마스크를 추가하여 개선하고 싶습니다. 특정 탭의 내용이 렌더링 된 후에 사라집니다.

내가 듣고 있어야 할 것이지만, 내가 activeitemchange에서 loadmask를 활성화해야합니까? 그렇다면 글로벌 페인트 이벤트를 사용하여 마스크를 해제해야합니까? 필자는이 작업을 수행하는 가장 효율적인 방법이 주 컨트롤러에 있다고 가정하고 있습니다. 예를 들어 여러 가지 리스너를 사용하는 대신 한 번만 수행하면됩니다. 이것은 작동하는 것 같다 내가 탭 항목을 클릭에 loadmask를 얻을 수 있지만, 내가 그린 이벤트에 마스크를 해제하는 방법을 잘 모르겠어요 :

Ext.define('TCApp.controller.Main', { 
extend: 'Ext.app.Controller', 

config: { 
refs: { 
    tabpanel: 'tabpanel' 
}, 
control: { 
    tabpanel: { 
    activeitemchange: 'onActiveItemChange' 
        } 
     } 
}, 
onActiveItemChange: function (self, newItem) { 
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true}); 
    console.log('Activeitemchanged'); 
} 
}); 

이가 그린 이벤트에 Ext.Viewport.setMasked(false);을 가하고, 가장 좋은 방법입니다, 메인 컨트롤러에? 나는 이것을 어떻게하는지 정말로 모른다.

나는이를 읽어 봤는데,하지만 난 그것을 생각하지 않는다 훨씬 도움 :

http://senchaexamples.com/2012/03/05/determining-when-the-active-item-changes-on-an-ext-tabpanel-container-in-sencha-touch-2/

Answer 1

나는 당신이 그 탭 패널의 활성 항목을 변경할 때 그 모르겠어요 'painted'이벤트를 트리거합니다 (테스트 할 수 있습니다). 내 머리 꼭대기에서 (이 테스트하지 않은) 당신은 몇 가지 옵션이 있습니다. 탭 패널에 대한 컨트롤 구성에서 '활성화'이벤트를 추가 할 수 있습니다. 문서에 따라 컨테이너 내의 항목이 활성화 될 때이 이벤트가 발생합니다. 그래도 문제가 해결되지 않으면

, 당신은 당신 onActiveItemChange 기능이 뭔가를 시도 할 수 있습니다 :

onActiveItemChange: function (self, newItem) { 
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true}); 
    console.log('Activeitemchanged'); 
    newItem.on('painted', this.hideMask, this); 
    //might need to try newItem.element.on('painted', this.hideMask, this); 
}, 
hideMask: function() { 
    Ext.Viewport.setMasked(false); 
}