CODEWITHSUNDEEP
javascriptextjs
user2073333
user2073333

Reputation: 162

Extjs drag drop

I would like to drop node from tree panel onto a panel. I have configured tree to use treeviewdragdrop plugin, like this:

Ext.define('APP.view.SampleTreeView', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.sampleTreeView',
    store: 'SampleTreeStore',
    rootVisible: false,
    renderTo: Ext.getBody(),
    columns: [
        { xtype: 'treecolumn', dataIndex: 'text', flex: 1 }
    ],
    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop',
            dragGroup: 'editorDDGroup'
        },
    }
});

Then, i created drop zone on the target panel:

Ext.onReady(function () {
    var DDTarget = new Ext.dd.DDTarget('tgtPanel', 'editorDDGroup', {})
});

tgtPanel definition:

Ext.define('APP.view.TargetPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.targetPanel',
    id: 'tgtPanel',
    renderTo: Ext.getBody(),
    width: 400,
    height: 200,
    title: 'Target Panel'
});

Now, tree nodes can be dragged, and over the target panel there is a green checkmark indicating that drop is allowed, but when i release the mouse, i get ext-all.js uncaught type error: Cannot read property 'focus' of undefined

What am I doing wrong?

Upvotes: 1

Views: 337

Answers (1)

user2073333
user2073333

Reputation: 162

I accidently stumbled upon solution, instead of using Ext.dd.DDtarget i used Ext.dd.DropTarget.

before:

var DDTarget = new Ext.dd.DDTarget('tgtPanel', 'editorDDGroup', {})

after:

var DDTarget = new Ext.dd.DropTarget(me.getEl().dom, {
    notifyDrop: function (dragsource, event, data) {
                    //
    },
});
panelDropTarget.addToGroup('editorDDGroup');

Upvotes: 1

Related Questions