Extjs 4 drag and drop grid to zones cancel drag items

Question

I use extjs 4 example dragdropzones.js .Its works well. but i want to remove added item means draged items from panel.help to solve this problem.I try to call another function on onclick from function onNodeDrop and try to pass and access target but it doesnt work means it shows null value.so i dont understand what wil be the procedure for this.

Ext.require(['*']);
Ext.onReady(function() {


     Ext.define('Accountformfield', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [{
                name: 'formfieldname'
            }, {
                name: 'id'
            }]
    });
    var fields = [{
        id: '1',
        formfieldname: 'field1'
    }, {
        id: '2',
        formfieldname: 'field2'
    }, {
        id: '3',
        formfieldname: 'field3'
    }, {
        id: '4',
        formfieldname: 'field4'
    }, {
        id: '5',
        formfieldname: 'Field5'
    }];


    var fieldStore = Ext.create('Ext.data.Store', {
        model: 'Accountformfield',
        data: fields
    });

    var groups = [{
        id: 1,
        name: 'Group1'
    }, {
         id: 2,
        name: 'Group2'
    }, {
         id: 3,
        name: 'Group3'
    }];

    Ext.define('Formfieldgroup', {
        extend: 'Ext.data.Model',
        idProperty: 'id',
        fields: [{
            name: 'name'
        }]
    });

    var groupStore = Ext.create('Ext.data.Store', {
        model: 'Formfieldgroup',
        data: groups
    });

    var fieldView = Ext.create('Ext.view.View', {
        cls: 'patient-view',
        tpl: '<tpl for=".">' +
                '<div class="patient-source"><table><tbody>' +
                    '<tr><td class="patient-label">Name</td><td class="patient-name">{formfieldname}</td></tr>' +
                '</tbody></table></div>' +
             '</tpl>',
        itemSelector: 'div.patient-source',
        overItemCls: 'patient-over',
        selectedItemClass: 'patient-selected',
        singleSelect: true,
        store: fieldStore,
        listeners: {
            render: initializePatientDragZone,
                    el: {
                            click: function() {
                            Ext.Msg.alert('drag');
                        }
                   }
        }
    });

    var mapingGrid = Ext.create('Ext.grid.GridPanel', {
        title: 'Group Maintainance',
        region: 'center',
        margins: '0 5 5 0',
        hideHeaders: true,
        sortableColumns: false,
        columns: [{
            dataIndex: 'name',
            width:'100%'
        }],
        features: [{
            ftype:'rowbody',
            rowBodyDivCls: 'hospital-target',
            getAdditionalData: function() {
                return Ext.apply(Ext.grid.feature.RowBody.prototype.getAdditionalData.apply(this, arguments), {
                    rowBody: 'Drop Field Here'
                });
            }
        }
        ],
        viewConfig: {
            listeners: {
                render: initializeHospitalDropZone
            }
        },
        store: groupStore,
        buttons: [{
            text: 'Save',
            handler: function(){
                var form = formpanel.getForm();
                form.loadRecord(record);
                if(form.isValid()){
                    form.submit({
                        url: 'accounts',
                        //waitMsg: 'Uploading your photo...',
                        success: function(fp, o) {
                            msg('Success', 'Processed file "' + o.result.file + '" on the server');
                        }
                    });
                }
            }
        }]
    });

    Ext.create('Ext.Viewport', {
        layout: 'border',
        items: [{
            cls: 'app-header',
            region: 'north',
            height: 30,
            html: '<h1>Form Maintainance</h1>',
            margins: '5 5 5 5'
        }, {
            title: 'Fields',
            region: 'west',
            width: 300,
            margins: '0 5 5 5',
            items: fieldView
        }, mapingGrid
            ]
    });
});

/*
 * Here is where we "activate" the DataView.
 * We have decided that each node with the class "patient-source" encapsulates a single draggable
 * object.
 *
 * So we inject code into the DragZone which, when passed a mousedown event, interrogates
 * the event to see if it was within an element with the class "patient-source". If so, we
 * return non-null drag data.
 *
 * Returning non-null drag data indicates that the mousedown event has begun a dragging process.
 * The data must contain a property called "ddel" which is a DOM element which provides an image
 * of the data being dragged. The actual node clicked on is not dragged, a proxy element is dragged.
 * We can insert any other data into the data object, and this will be used by a cooperating DropZone
 * to perform the drop operation.
 */
function initializePatientDragZone(v) {
    v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {

//      On receipt of a mousedown event, see if it is within a draggable element.
//      Return a drag data object if so. The data object can contain arbitrary application
//      data, but it should also contain a DOM element in the ddel property to provide
//      a proxy to drag.
        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,
                    patientData: 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;
        }
    });
}

/*
 * Here is where we "activate" the GridPanel.
 * We have decided that the element with class "hospital-target" is the element which can receieve
 * drop gestures. So we inject a method "getTargetFromEvent" into the DropZone. This is constantly called
 * while the mouse is moving over the DropZone, and it returns the target DOM element if it detects that
 * the mouse if over an element which can receieve drop gestures.
 *
 * Once the DropZone has been informed by getTargetFromEvent that it is over a target, it will then
 * call several "onNodeXXXX" methods at various points. These include:
 *
 * onNodeEnter
 * onNodeOut
 * onNodeOver
 * onNodeDrop
 *
 * We provide implementations of each of these to provide behaviour for these events.
 */
function initializeHospitalDropZone(v) {
    var gridView = v,
        grid = gridView.up('gridpanel');

    grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {

//      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){
            Ext.fly(target).addCls('hospital-target-hover');
        },

//      On exit from a target node, unhighlight that node.
        onNodeOut : function(target, dd, e, data){
            Ext.fly(target).removeCls('hospital-target-hover');
        },

//      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 = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
                mainRow = rowBody.previousSibling,
                h = gridView.getRecord(mainRow),
                targetEl = Ext.get(target);
        targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);
        //Ext.Msg.alert(targetEl.dom.innerHTML);
        //Ext.Msg.alert('Drop gesture', 'Dropped patient ' + data.patientData.formfieldname +' on hospital ' + h.data.name);
            return true;
        }
    });
}

Answer 1

First, add id to both your Patient View and each template row:

    fieldView = Ext.create('Ext.view.View', {

    // add id
    id: "patientView",
    cls: 'patient-view',

    // for each item add appropriate id
    tpl: '<tpl for=".">' +
            '<div id="{id}" class="patient-source"><table><tbody>' +
                '<tr><td class="patient-label">Name</td><td class="patient-name">{formfieldname}</td></tr>' +
            '</tbody></table></div>' +
         '</tpl>',
    itemSelector: 'div.patient-source',
    overItemCls: 'patient-over',
    selectedItemClass: 'patient-selected',
    singleSelect: true,
    store: fieldStore,
    listeners: {
        render: initializePatientDragZone,
                el: {
                        click: function() {
                        Ext.Msg.alert('drag');
                    }
               }
    }
});

Next, inside onNodeDrop handler add the next code removing html rows from DOM

    onNodeDrop : function(target, dd, e, data){
        var rowBody = Ext.fly(target).findParent('.x-grid-rowbody-tr', null, false),
            mainRow = rowBody.previousSibling,
            h = gridView.getRecord(mainRow),
            targetEl = Ext.get(target);
    targetEl.update('<a onclick="remove(\''+data.patientData.id+'\');">'+data.patientData.formfieldname + '</a>,' + targetEl.dom.innerHTML);

    // This code removes HTML row from the control. 
var htmlNode = Ext.getCmp("patientView").el.down("#"+data.patientData.id);
htmlNode.remove();

    return true;
    }