Drag and Drop ordering in a TreePanel using reorder.js

This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files).

In order to demonstrate drag and drop insertion points, sorting was not enabled.
The data for this tree is asynchronously loaded through a TreeStore and AjaxProxy.
The js is not minified so it is readable. See reorder.js.


Ext.onReady(function() {

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'get-nodes.php'
root: {
text: 'Ext JS',
id: 'src',
expanded: true
folderSort: true,
sorters: [{
property: 'text',
direction: 'ASC'

var tree = Ext.create('Ext.tree.Panel', {
store: store,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
containerScroll: true
renderTo: 'tree-div',
height: 300,
width: 250,
title: 'Files',
useArrows: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Expand All',
handler: function(){
tree.getEl().mask('Expanding tree...');
var toolbar = this.up('toolbar');

tree.expandAll(function() {
}, {
text: 'Collapse All',
handler: function(){
var toolbar = this.up('toolbar');

tree.collapseAll(function() {

About the author

Being the CEO and Founder of ClecoTech International, Mr. Ashish Prajapati is dedicated towards his aim of mentoring young startups into a full-fledged businesses. He is helping startups from America, Europe, India, and various other countries through proper guidance and the use of latest technologies to develop their innovation and ideas into definite realities.


  1. Excellent blog thanks for sharing Setting up a successful salon means that you need the best wholesale cosmetics suppliers in Chennai to back up your brand. With hundreds of exclusive international brands and down to earth service, Pixies Beauty Shop is your destination to success.
    beauty Shop in Chennai

Leave a Reply

Your email address will not be published. Required fields are marked *