Results 1 to 2 of 2

Thread: Creating Drag and Drop from a tree view

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha Premium Member
    Join Date
    May 2011
    Vote Rating

    Default Creating Drag and Drop from a tree view

    Is it possible to drag a tree node onto a chart?

    I cant get the drop zone to work properly. I see that my treePanel is correctly dragging the node, but I cant get the drop to work. Am I missing something? Also I am using sencha architect and I do not see anything in the toolbox for drop zones.... My chart is in a panel, and on render, I run this function...
    initializeDropZone: function() {
            /* var gridView = v,
            grid = gridView.up('gridpanel');*/
            this.dropZone = Ext.create('Ext.dd.DropZone', this.up('panel').getEl(), {
                //      If the mouse is over a target node, return that node. This is
                //      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
                getTargetFromEvent: function(e) {
                    return e.getTarget('.hospital-target');
                //      On entry into a target node, highlight that node.
                onNodeEnter : function(target, dd, e, data){
                //      On exit from a target node, unhighlight that node.
                onNodeOut : function(target, dd, e, data){
                //      While over a target node, return the default drop allowed class which
                //      places a "tick" icon into the drag proxy.
                onNodeOver : function(target, dd, e, data){
                    return Ext.dd.DropZone.prototype.dropAllowed;
                //      On node drop, we can interrogate the target node to find the underlying
                //      application object that is the real target of the dragged data.
                //      In this case, it is a Record in the GridPanel's Store.
                //      We can use the data set up by the DragZone's getDragData method to read
                //      any data we decided to attach.
                onNodeDrop : function(target, dd, e, data){
                    var rowBody ='.x-grid-rowbody-tr', null, false),
                        mainRow = rowBody.previousSibling,
                        h = gridView.getRecord(mainRow),
                        targetEl = Ext.get(target),
                        html = targetEl.dom.innerHTML;
                    if (html == 'Drop Patient Here') {
                        html =
                    } else {
                        html = + ', ' + targetEl.dom.innerHTML;
                    Ext.Msg.alert('Drop gesture', 'Dropped patient ' + +
                    ' on hospital ' +;
                    return true;

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Is the chart and tree part of the same ddgroup?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts