WEB2.0/ExtJS

ExtJS에서 Mask적용하기

시반 2008. 11. 21. 18:32

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);