작업이 수행되는 동안 ExtJS 마스크 패널

Question

내 뷰포트에 Ext west 패널이 있고 버튼에 먼저 서쪽에서 모든 요소를 ​​제거한 다음 다른 요소를 광고한 다음 doLayout()을 수행하는 핸들러가 있습니다.따라서 버튼을 클릭하면 이 기능이 수행하는 세 가지 작업이 있습니다.버튼을 클릭할 때 서쪽 패널에 마스크를 추가하고 3가지 작업이 모두 완료된 후 마스크를 해제하고 싶습니다.

패널은 다음과 같습니다.

{
                region: 'west',
                id: 'west-panel',
                title: 'West',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: 'fit'
                items: [leftMenu]
            }

이것이 제가 작업을 수행하는 방법입니다.

west.removeAll();
west.add(indexHeaderPanel);
west.doLayout();

이것이 가능한가 ?요청하시면 더 많은 정보를 드리겠습니다.감사합니다.

Answer 1

문자 그대로 코드 블록 전후에 Mask()를 수행한 다음 unmask()를 수행하면 됩니다.코드의 어떤 항목이 비동기적으로 실행되는 경우 적절한 콜백에서 마스크 해제가 수행되는지 확인하면 됩니다.예로서:

    buttons: [{
        text: 'Refresh West Panel',
        handler: function(){
            var w = Ext.getCmp('west-panel');
            w.getEl().mask();
            w.removeAll();
            w.add(indexHeaderPanel); // assuming you have this ref!
            w.doLayout();
            w.getEl().unmask();
        }
    }]

논리가 충분히 빠르게 실행되면 마스킹이 표시되지 않습니다.작동하는지 확인하려면 테스트 지연을 설정하면 됩니다.

    buttons: [{
        text: 'Foo',
        handler: function(){
            var w = Ext.getCmp('west-panel');
            w.getEl().mask();

            // do whatever

            (function(){
                w.getEl().unmask();
            }).defer(1000, this);
        }
    }]

w.getEl().[un]mask()는 전체 패널(머리글/바닥글 포함)을 마스킹합니다.내용만 마스크하려면 w를 수행합니다.몸.[un]마스크().