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.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.tip.*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();
    
    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');
                    toolbar.disable();
                    
                    tree.expandAll(function() {
                        tree.getEl().unmask();
                        toolbar.enable();
                    });
                }
            }, {
                text: 'Collapse All',
                handler: function(){
                    var toolbar = this.up('toolbar');
                    toolbar.disable();
                    
                    tree.collapseAll(function() {
                        toolbar.enable();
                    });
                }
            }]
        }]
    });
});

Post a Comment

4 comments:

  1. Awesome blog thanks for sharing Finally, an SEO agency in Chennai that understands exactly what you need. Adhuntt Media knows advanced search engine optimization and branding like the back of their hand. Let’s kickstart your brand right here right now!
    digital marketing company in chennai
    seo service in chennai
    web designing company in chennai
    social media marketing company in chennai

    ReplyDelete
  2. Nice blog thanks for sharing It’s time you got the number 1 gardening service in Chennai. Find exotic plants and aromatic flowers at the best price at Karuna Nursery Gardens - the home for high quality organic greenery.
    plant nursery in chennai
    rental plants in chennai
    corporate gardening service in chennai

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

    ReplyDelete