행복만땅 개발자

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
              .... 
       } 
},