행복만땅 개발자

Tree.TreeLoader 의  beforeload와 load 이벤트에서 Mask를 정의하면

Tree컴포넌트를 생성시  '로딩중...' 이라는 mask 를 볼수 있다.

그럼 다른 곳에서는 사용할 수 없는걸까?

mask()는 Ext.LoadMask Object 를 사용하고 있기 때문에 어떤 Element에도 적용할 수 있다.

기본적으로 UpdateManager에 다음과 같이 바인딩하면 된다.

new Ext.LoadMask(el, {msg: 'Please Wait...'});

예를 들면 Store에서는 다음과 같이 바인딩하면 된다.

new Ext.LoadMask(el, {msg: 'Please Wait...', store: yourStore});

또 다른 예로 TreeLoader인 경우를 들면 샘플예제 때문인지 다음과 같이 많이들 사용하고 있는 듯하다.

var tree = Tree.TreeLoader({
        ...

         listeners: {
          beforeload: function(treeLoader, node) {
             node.getOwnerTree().getEl().mask('Loading...');
          },
          load: function(treeLoader, node) {
             node.getOwnerTree().getEl().unmask();
          }
       }
   }
});

위의 코드를 다음과 같이 사용하면 된다.

new Ext.LoadMask(tree.el, {msg: 'Please Wait...', store: tree.loader});

Grid 의 경우는 더 간단하다.

config option으로 loadMask항목을 true로 해주기만 하면 된다.(기본값은 false)

아니면 다음과 같이 해도 상관없다.

loadMask : {msg: 'Loading Data...', msgCls: 'some-css-class'}

앞서 말한바 있지만 모든 elements에 적용할 수 있다는 말은 Ext.Element 의 API를 보면 잘 알 수 있다

Ext.Element 에는 mask() 라는 Function 에는 의 선택 arguments를 가지고 있는 것을 확인할 수 있다.

el.mask(msg, msgCls);