O'Reilly logo

Enterprise Application Development with Ext JS and Spring by Gerald Gierer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required