1

我在页面上的Container A中有一个 ExtJS 树面板，还有另一个Container B。

树面板通过 Ajax 调用使用项目进行初始化。在viewConfig树形面板中，我添加了itemadd事件侦听器，在其中我将添加的项目注册为 DragSource。以下是树形面板中的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
        };
    });
}

在Container B的项目中，我添加了一个名为 View 的内部MyView扩展Ext.container.Container。所以在afterrenderContainer B中，我将自己注册为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.
    };
}

现在这里的问题在逐步使用中描述。

  • 我第一次将一个项目从树形面板拖到容器 B 中，它按预期工作。
    • 我不允许将重复的项目再次添加到MyView中，我为每个添加的项目都有一个删除按钮，以便将其从 MyView 中删除。
  • 我删除了我添加的项目。
  • 我尝试再次从树形面板中拖动它，但它不再是可拖动的项目。
    • 虽然我仍然可以从同一个树形面板中拖动另一个项目并添加它，但不是我之前添加和删除的第一个项目（对于我曾经添加到的所有项目都会发生同样的事情MyView。请注意，删除项目不是复制所必需的问题，仅添加它会导致此问题。

那么这里出了什么问题呢？

任何帮助都会很棒。

4

1 回答 1

0

我建议对树使用Ext.tree.plugin.TreeViewDragDropView( ) 插件，而不是手动处理它。ptype: treeviewdragdrop

树形面板的示例：

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;
                }
            });                         
        }
    }
});
于 2013-10-18T09:50:43.260 回答