'mask'에 해당되는 글 1건

  1. 2008.11.21 | ExtJS에서 Mask적용하기

ExtJS에서 Mask적용하기

WEB2.0/ExtJS | 2008. 11. 21. 18:32
Posted by 시반

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

 

 
블로그 이미지

시반

시반(詩伴)이란 함께 시를 짓는 벗이란 뜻을 가지고 있습니다. 함께 나눌수 있는 그런 공간이길 바라며...

카테고리

분류 전체보기 (233)
개발 이야기 (73)
WEB2.0 (57)
DB2 (24)
MySQL (6)
오라클 (26)
기타 (44)
취미 (0)
잡담 (2)