1

我正在尝试实现一些从树面板到视图的拖放功能，但我无法做到这一点。我是使用 ExtJs 的新手，也许我做错了什么。我的树定义如下：

var treeMeasures = Ext.create('Ext.tree.Panel', {
    id: 'treeMeasuresPanel',
    title: 'Measures',
    region: 'north',
    store: dsMeasures,
    rootVisible: true,
    width: '100%',
    height: '50%',
    useArrows: true,
    enableDD: true,
    allowDrop: false,
    collapsible: true,
    border: 0,
    style: 'border-right:1px solid #99BCE8;border-top:none;border-left:none;border-bottom: none;',
    viewConfig: {
        listeners: {
            render: initializeFieldsDragZone
        },
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: 'fieldsToAreas',
            enableDrag: true,
            enableDrop: false,
            containerScroll: true
        }
    }
});

initializeFieldsDragZone 函数：

function initializeFieldsDragZone(v, record, item, index, evt, eOpts) {
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {

    getDragData: function (e) {
        var sourceEl = e.getTarget(v.itemSelector, 10), d;
        if (sourceEl) {
            d = sourceEl.cloneNode(true);
            d.id = Ext.id();
            return v.dragData = {
                sourceEl: sourceEl,
                repairXY: Ext.fly(sourceEl).getXY(),
                ddel: d,
                controlData: v.getRecord(sourceEl).data
            };
        }
    },

    //      Provide coordinates for the proxy to slide back to on failed drag.
    //      This is the original XY coordinates of the draggable element.
    getRepairXY: function () {
        return this.dragData.repairXY;
    }
});

}

风景：

 var filterAreaView = Ext.create('Ext.view.View', {
    store: dsFilterArea,
    tpl: "",
    ddGroup: 'fieldsToAreas',
    bodyStyle: {
        background: 'ffffff'
    },
    listeners: {
            render: initializeAreasDropZone
        }        
});

而 initializeAreasDropZone 函数是：

function initializeAreasDropZone(area) {
var view = area.getEl();

view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {

    getTargetFromEvent: function (e) {
        return e.getTarget('.x-grid-row');
    },

    onNodeEnter: function (target, dd, e, data) {

    },

    onNodeOut: function (target, dd, e, data) {

    },

    onNodeOver: function (target, dd, e, data) {
        return true;
    },

    onNodeDrop: function (target, dd, e, data) {

// 我的代码

        return true;
    }
});

}

问题是，当我从树中拖动节点并尝试放入视图时，什么也没有发生。

有谁知道我做错了什么？

谢谢，

阿尔贝托

4

2 回答 2

1

我想你可能想多了。我在两个面板 (Ext.tree.Panel) 之间创建了一个 DD 工作模型，每个面板都包含一个根、多个文件夹和每个文件夹中的多个叶子。只需将插件添加到每个启用树的 DD：

viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            ddGroup: 'myDDGroup',
            appendOnly: true,
            sortOnDrop: true,
            containerScroll: true
        }
    },

完成此操作后，当我单击并将叶子从一棵树拖动到另一棵树时，它会在释放鼠标按钮时尽职尽责地将叶子添加到目标文件夹。就监视事件而言，我不必做任何其他事情。

于 2013-08-07T19:38:49.737 回答
0

如果您将 TreePanel 用于 Drag Zone，我认为我们不需要创建函数 initializeFieldsDragZone，只需使用插件“treeviewdragdrop”。

您的代码中的问题是 initializeAreasDropZone 的 ddgroup 必须与插件相同：

 function initializeAreasDropZone(area) {
    var view = area.getEl();

    view.dropZone = Ext.create('Ext.dd.DropZone', area.el, {

        getTargetFromEvent: function (e) {
            return e.getTarget('.x-grid-row');
        },

        onNodeEnter: function (target, dd, e, data) {

        },

        onNodeOut: function (target, dd, e, data) {

        },

        onNodeOver: function (target, dd, e, data) {
            return true;
        },

        onNodeDrop: function (target, dd, e, data) {
            console.log(data);
        },

        ddGroup: 'fieldsToAreas'
    });
}

干杯

于 2015-03-27T07:02:21.417 回答