행복만땅 개발자

2.2.1 이상의 버젼의 ExtJS로 구현된 경우 IE8에서 그리드의 편집을 위해 셀을 클릭할때마다 왼쪽으로 GridBody가 스크롤되어  숨어버리는 버그가 있다. 솔직히 이 버그는 예전에 ExtJS를 2.2.1 으로 마이그레이션을 할 때 발견했던 부분이었는데 IE8에서와는 달리 Editable Grid에서 셀을 클릭할때 GridView.focusCell에서 버그가 발생하여 패널에  ScrollBar가 생기곤 했다.

생기곤 했다라는 말대로 항상 발생한 것은 아니고 그리드가  두개의 컬럼만 가지고 있는 경우나 GridBody의 width가 GridPanel의 width보다 작은 경우에는 발생하지 않았다.

다음은 IE8을 사용할 경우 앞서 말한 버그를 보여준다. Extjs의 샘플페이지 중 Editable Grid 페이지에서 셀을 클릭한 경우 스크롤이 생기면서 GridBody부분이 왼편으로 숨어버리는 화면이다. 아직 버그 패치는 안된거 같구 이후 수정되면 샘플페이지에서는 이런 화면은 안나오게 될 수도....

ExtJS의 샘플예제를 보면 몇몇 DD(DragDrop) 샘플예제들을 볼 수 있다.

먼저 그리드에서 Drag&Drop을 사용하기 위해서는 

drag할 그리드에서  enableDragDrop옵션을 true로 해주고

ddGroup을 정의한후 (아래샘플의 경우 'GridDD')  다음과 같이 DropTarget 인스턴스를 생성해주면 된다.

var drop = new Ext.dd.DropTarget(Drop될 컨테이너 Element, {
      //옵션..

      ddGroup : 'GridDD', // 그리드 설정옵션의 ddGroup의 값과 동일.
      notifyDrop : function(dd, e, data){
            // to do

      }        
});

그리드끼리나 폼 등에서는 위와 같이 하면 작동이 되는걸 확인할 수 있는데

그리드에서 트리로 Drag&Drop을 하고자 하는 경우에는 DropTarget을 어떻게 설정을 해야 할까?

(한마디로 위와같은 방법으로는 핸들링되지 않는다.)

사실 tree에서는 DD가 이미 built-in 되어 있기 때문에 별도의  DropTarget 인스턴스를 생성시킬 필요가 없을 뿐더러

위와 같은 방법으로는 핸들링되지 않는다.

단지 tree 설정옵션인 enableDrop을 true로 바꿔주고

dropConfig만 만들어 주면 된다.설정옵션은 동일..

예를 들어보면 tree 설정옵션에 다음과 같이 추가하면 된다.

  enableDrop:true,
  dropConfig:{
         ddGroup : 'GridDD'
         ,onNodeDrop : function(n,dd, e, data){
               var selectedRecord = dd.dragData.selections[0]; //drag된 record
              .... 
       } 
},

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