Question

我在页面上的容器A 中有一个ExtJS树状图，还有另一个容器B 。

通过Ajax调用使用项目初始化treepanel。在treepanel的viewConfig中，我添加了itemadd事件侦听器，其中我将添加的项目注册为DragSource。以下是treepanel itemadd内的viewConfig事件监听器。

'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。因此，在容器B 的afterrender中，我将自己注册为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拖动它，但它不再是可拖动的项目。
- 虽然我仍然可以从同一个treepanel中拖动另一个项目并添加它，但不是我之前添加和删除的第一个项目（对于我曾添加到MyView的所有项目都会发生同样的事情。请注意删除项目不是重现问题的必要条件，只有添加它才会导致此问题。

那么这里出了什么问题？

任何帮助都会很棒。

Answer 1

我建议对树使用Ext.tree.plugin.TreeViewDragDropView（ptype: 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;
                }
            });                         
        }
    }
});

拖放停止为曾经拖动的项目工作

1 个答案: