2013-10-17 39 views
1

我有一個ExtJS treepanel在容器A頁上,還有另一個容器BDrag and Drop停止爲一次拖動的項目工作

treepanel通過Ajax調用項目進行初始化。在treepanel的viewConfig中,我添加了itemadd事件偵聽器,其中我將添加的項目註冊爲DragSource。以下是中的itemadd事件監聽器。

'itemadd': function(records, node){ 
    // Iterate over each child record of parent node in treepanel. 
    Ext.each(records, function(record){ 
     var dragSource, 
      field, 
      fieldId; 
     field = Ext.query('[id='+record.data.listId+']')[0]; // I've manually added 'listId' which has unique value gained from Ext.id() for each record item. 
     fieldId = field.id; 
     dragSource = new Ext.dd.DragSource(field, { 
      isTarget : false 
     }); 

     dragSource.dragData = { 
      record: record 
     }; 
    }); 
} 

而且在容器條b,我加入了一個名爲MyView查看延伸Ext.container.Container內部。因此,在集裝箱Bafterrender中,我將自己註冊爲DropTarget。我是這麼做的;

'afterrender': function(containerMain) { 
    var dropZone, 
     myView = Ext.ComponentQuery.query("myview")[0]; 

    dropZone = new Ext.dd.DropTarget(containerMain.getEl()); // Register Container B as DropTarget. 

    dropZone.notifyDrop = function(source, event, params) { 
     myView.doSomething(params.record); // This method will handle data of dropped record and internally show something on UI. 
    }; 
} 

現在,這是一步一步使用中描述的問題。

  • 我將第一次從treepanel項目拖到容器B中,它按預期工作正常。
    • 我不允許再添加重複的項目到MyView,我有一個刪除按鈕添加每個項目從MyView中刪除它。
  • 我刪除了我添加的項目。
  • 我嘗試再次從樹面板拖動它,但是它不再是可拖動的項目
    • 儘管我仍然可以從同一個treepanel中拖動另一個項目並添加它,但不是我之前添加和刪除的第一個項目(並且對於我曾添加到MyView中的所有項目都會發生同樣的事情請注意,刪除項目不必重現該問題,只增加它會導致此。

那麼,什麼是越來越錯在這裏?

任何幫助將是巨大的。

回答

0

我建議爲樹使用Ext.tree.plugin.TreeViewDragDropViewptype: treeviewdragdrop)插件,而不是手動處理它。

實施例爲TreePanel中:

var treePanel = Ext.create('Ext.tree.Panel', { 
    (...), 
    viewConfig: { 
     plugins: { 
      ptype: 'treeviewdragdrop', 
      ddGroup: "sameGroup", 
      enableDrop: false 
     } 
    } 
});

對於面板:

var panel = Ext.create('Ext.panel.Panel', { 
    (...), 
    listeners: { 
     'afterrender': function(component) { 
      var dropZone = Ext.create('Ext.dd.DropTarget', component.body.dom, { 
       ddGroup: 'sameGroup', 
       notifyDrop: function(source, event, params) { 
        var myView = panel.up('myview'); 
        myView.doSomething(source, event, params); 
        return true; 
       } 
      });       
     } 
    } 
});