Drag-and-drop made easy

Dragging and dropping nodes within trees is easy with Ext JS 4. To allow the drag-and-drop action within a tree, we need to add the TreeViewDragDrop plugin as follows:

Ext.define('TTT.view.admin.CompanyTree', {
    extend: 'Ext.tree.Panel',
    xtype: 'companytree',
    title: 'Company -> Projects -> Tasks',
    requires: ['TTT.store.CompanyTree','Ext.tree.plugin.TreeViewDragDrop'],
    store: 'CompanyTree',
    lines: true,
    rootVisible: false,
    hideHeaders: true,
    viewConfig: {
        preserveScrollOnRefresh: true,
        plugins: {
            ptype: 'treeviewdragdrop'
        }
    }, etc

This simple inclusion will enable the drag-and-drop support for your tree. You will now be able to drag-and-drop any node to a new parent. Unfortunately, this is not exactly what we need. A task ...

Get Enterprise Application Development with Ext JS and Spring now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial