Drag drop in ExtJS TreeGrid

Question

I want to implement drag and drop nodes in ExtJS TreeGrid. I am able to populate the TreeGrid but have no idea how is drag and drop handled in it. Here is my ExtJS code to populate the TreeGrid:

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
]);

Ext.onReady(function () {
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'task', type: 'string' },
            { name: 'assignedto', type: 'string' }
        ]
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        proxy: {
            type: 'ajax',
            url: 'treegrid.json'
        },
        folderSort: false
    });

    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        collapsible: true,
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        columns: [{
            xtype: 'treecolumn',
            text: 'Task',
            flex: 2,
            sortable: true,
            dataIndex: 'task'
        }, {
            text: 'Assigned To',
            flex: 1,
            dataIndex: 'assignedto',
            sortable: true
        }]
    });

Following is the sample JSON data:

{"text":".","children": [
    {
        task:'Task: R&D',       
        assignedto:'Reserved Team',
        iconCls:'task-folder',
        expanded: true,
        children:[{
            task:'Grid',
            duration:1.25,
            assignedto:'Gopal Kanjoliya',
            iconCls:'task-folder',
            children:[{
                task:'Create',
                duration:0.25,
                assignedto:'Gopal Kanjoliya',
                leaf:true,
                iconCls:'task'
            },{
                task:'Read',
                duration:.4,
                assignedto:'Gopal Kanjoliya',
                leaf:true,
                iconCls:'task'
            }]
        }, {
            task:'Tree',
            duration:12,
            assignedto:'Gopal Kanjoliya',
            iconCls:'task-folder',
            expanded: true,
            children:[{
                task:'Add Node',
                duration: 2.75,
                assignedto:'Gopal Kanjoliya',
                iconCls:'task-folder',
                children: [{
                    task: 'Delete',
                    duration: 1.25,
                    assignedto: 'Gopal Kanjoliya',
                    iconCls: 'task',
                    leaf: true
                }]
            },{
                task:'Form',
                duration:2.75,
                assignedto:'Gopal Kanjoliya',
                leaf:true,
                iconCls:'task'
            }]
        }]
    },{
        task:'Task: Implementation',
        duration:2,
        assignedto:'Development Team',
        iconCls:'task-folder',
        children:[{
            task: 'Forms',
            duration: 0.75,
            assignedto: 'Gopal Kanjoliya',
            iconCls: 'task-folder',
            children: [{
                task: 'Grids',
                duration: 0.25,
                assignedto: 'Gopal Kanjoliya',
                iconCls: 'task',
                leaf: true
            }]
        },{
            task: 'Components',
            duration: 3.75,
            assignedto: 'Shyam Dhanotiya',
            iconCls: 'task-folder',
            children: [{
                task: 'Panels',
                duration: 0.25,
                assignedto: 'Shyam Dhanotiya',
                iconCls: 'task',
                leaf: true
            }]
        },{
            task: 'Test',
            duration: 0.5,
            assignedto: 'Snehil Chaturvedi',
            iconCls: 'task-folder',
            children: [{
                task: 'Manual',
                duration: 0.25,
                assignedto: 'Snehil Chaturvedi',
                iconCls: 'task',
                leaf: true
            }]
        }]
    }
]}

Answer 1

ExtJS has a nice plugin for this: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.plugin.TreeViewDragDrop Read the configs, they're quite important and useful

Just put this in the code of your treepanel:

    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    },

Also, here is a working fiddle I just put some random data in the store, didn't want to format all of yours

Ext.onReady(function () {

Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'task', type: 'string' },
        { name: 'assignedto', type: 'string' }
    ]
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    folderSort: false,
    root: {
        expanded: true,
        children: [
            {
                task: 'Child 1',
                assignedto: 'me',
                leaf: true
            },
            {
                task: 'Child 2',
                assignedto: 'me',
                expanded: true,
                children: [
                    {
                        task: 'GrandChild 1',
                        assignedto: 'you',
                        leaf: true
                    }
                ]
            },
            {
                task: 'Child 3',
                assignedto: 'me',
                expanded: true,
                children: [
                    {
                        task: 'GrandChild 2',
                        assignedto: 'you',
                        leaf: true
                    }
                ]
            },
        ]
    }
});

var tree = Ext.create('Ext.tree.Panel', {

    viewConfig: {
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    },

    title: 'Core Team Projects',
    width: 500,
    height: 300,
    renderTo: Ext.getBody(),
    collapsible: true,
    useArrows: true,
    rootVisible: false,
    store: store,
    multiSelect: true,
    singleExpand: true,
    columns: [{
        xtype: 'treecolumn',
        text: 'Task',
        flex: 2,
        sortable: true,
        dataIndex: 'task'
    }, {
        text: 'Assigned To',
        flex: 1,
        dataIndex: 'assignedto',
        sortable: true
    }]
});
});