1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    3
    Vote Rating
    0
    AlbertoMD is on a distinguished road

      0  

    Default Unanswered: Drag items from Tree Panel to View

    Unanswered: Drag items from Tree Panel to View


    I am trying to implement some drag and drop functionallity from a Tree Panel to a View but I have not been able to do this. I am new using ExtJs and maybe I am doing something wrong. I have my tree defined like this:


    Code:
    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
            }
        }
    });
    The initializeFieldsDragZone function:


    Code:
    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;
        }
    });
    }
    The View:


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


    Code:
    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) {
    // My Code
    
    
            return true;
        }
    });
    }
    And the problem is that when I drag the node from the tree and try to drop into the view nothing happens.
    DDExample.png
    Does anyone knows if I am doing something wrong?


    Thanks,


    Alberto

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,993
    Answers
    380
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Try changing the dropZone (with the getTargetFromEvent) to dropTarget and see if that gets you closer.

    You might check out this example, too, if you haven't seen it already:
    http://docs.sencha.com/extjs/4.2.1/e...d-grid-to-form
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread