How can restrict the drag & drop only if tree node is leaf in EXTJS

Question

I need only drag & drop them only if tree node is leaf in EXTJS. This is my code:

Drag Source

var tree = Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 400,
    height: 600,
    store: store,
    rootVisible: false,            
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            copy: true,
            dragGroup: 'myDDGroup'
        }
    },
});

Drop Target

Ext.define('myPanelDropTarget', {
    extend: 'Ext.dd.DropTarget',

    notifyEnter : function(source, e, data) {
        console.log('enter');
        return this.callParent(arguments);
    },                
    notifyOut : function(source, e, data) {
        console.log('out');
        return this.callParent(arguments);
    },

    notifyOver : function(source, e, data) {
        console.log('over');
        return this.callParent(arguments);
    },                
    notifyDrop : function(source, e, data) {
        var me = this;
        console.log('drop');

        var text = data.records[0].get('text');

        var d3ComponentEl = me.panel.down('#d3Component').getEl();

        d3ComponentEl.insertHtml('beforeEnd', text + '<br />');                

        return true;
    }                           
});

Panel configured with drop targetstrong text

var panel = Ext.create('Ext.panel.Panel', {
    title: 'Drop Target Panel',
    border: true,
    width: 400,
    height: 600,
    items: [
        {
          xtype: 'component',
          id: 'd3Component',
          autoEl: { tag: 'div' }
        }
    ],
    listeners: {
        'afterrender': function () {
            panel.dropZone = Ext.create('myPanelDropTarget', panel.getEl(), {
                ddGroup: 'myDDGroup',
                panel: panel
            });                    
        }
    }            
});

This works fine, but what happens is that I can also drag and drop folders from the tree, and would restrict only the leaf by hardship.

Example:

Fiddle with complete live example: https://fiddle.sencha.com/#fiddle/340

Look here if the node is not a leaf, what I need is if not cancel the leaf drop event. Have any idea?

Ext.define('myPanelDropTarget', {
    extend: 'Ext.dd.DropTarget',     

     nodedragover: function(targetNode, position, dragData){    
          var me = this;    
                        var rec = dragData.records[0].raw.canDrop;  
                        var camara = me.panel.down('#'+id);
                        console.log(camara.getEl());
                        if(!rec)
                        {
                 ***//I need to cancel the drop event***

                        }

                    },
    notifyDrop : function(source, e, data) {


        this.nodedragover(source, e, data);

        var me = this;  

        var cam = data.records[0].raw;

        var target = cam.protocol+'://'+cam.user+':'+cam.pass+'@'+cam.ip+':'+cam.port+'/'+cam.ruta;


        var camara = me.panel.down('#'+id);
        camara.setTitle(cam.text);

        var data = '<embed type="application/x-vlc-plugin"  id="vlc1" name="vlc1" toolbar="false" allowfullscreen="false"  width=100%; height=100%; target= "'+target+'"; />';      

        camara.body.setHTML(data);  


        return true;
    }               


});

Answer 1

Here can see the answer in the sencha forum restrict the drag & drop only if tree node is leaf in EXTJS 4.2