Results 1 to 3 of 3

Thread: Full refresh after tree view drag drop, once for every dropped node

    You found a bug! We've classified it as EXTJS-24202 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium User
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default Full refresh after tree view drag drop, once for every dropped node

    Should be batched into one final refresh.

    Drag a bunch of child nodes, drop them at first position in the tree.

    Code:
    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*',
        'Ext.tip.*',
        'Ext.ux.CheckColumn'
    ]);
    
    //we want to setup a model and store instead of using dataUrl
    Ext.define('Task', {
        extend : 'Ext.data.TreeModel',
        fields : [
            { name : 'task', type : 'string' },
            { name : 'user', type : 'string' },
            { name : 'expanded', defaultValue : true },
            { name : 'duration', type : 'string' },
            { name : 'done', type : 'boolean' }
        ]
    });
    
    Ext.onReady(function () {
        Ext.tip.QuickTipManager.init();
    
    
        var store = Ext.create('Ext.data.TreeStore', {
            model      : 'Task',
            proxy      : {
                type : 'ajax',
                //the store will get the content from the .json file
                url  : 'treegrid.json'
            },
            folderSort : true
        });
    
        //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
        var tree = Ext.create('Ext.tree.Panel', {
            title       : 'Core Team Projects',
            width       : 1000,
            height      : 500,
            renderTo    : Ext.getBody(),
            collapsible : true,
            useArrows   : true,
            rootVisible : false,
            store       : store,
            multiSelect : true,
            // viewConfig  : {
                //plugins : {
                //    ptype               : 'treeviewdragdrop',
                //    pluginId            : 'treeDragDrop',
                //    allowContainerDrops : true
                //}
            // },
            viewConfig: {
                plugins: { ptype: 'treeviewdragdrop' }
            },
            columns     : [{
                xtype     : 'treecolumn', //this is so we know which column will show the tree
                text      : 'Task',
                width     : 250,
                sortable  : true,
                dataIndex : 'task',
                locked    : true,
                editor    : {}
            }, {
                text      : 'Task',
                width     : 20,
                sortable  : true,
                dataIndex : 'task',
                locked    : true
            },
                {
                    //we must use the templateheader component so we can use a custom tpl
                    xtype     : 'templatecolumn',
                    text      : 'Duration',
                    width     : 150,
                    sortable  : true,
                    dataIndex : 'duration',
                    align     : 'center',
                    //add in the custom tpl for the rows
                    tpl       : Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                        formatHours : function (v) {
                            if (v < 1) {
                                return Math.round(v * 60) + ' mins';
                            } else if (Math.floor(v) !== v) {
                                var min = v - Math.floor(v);
                                return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                            } else {
                                return v + ' hour' + (v === 1 ? '' : 's');
                            }
                        }
                    })
                }, {
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                },{
                    text      : 'Assigned To',
                    width     : 150,
                    dataIndex : 'user',
                    sortable  : true
                }, {
                    xtype         : 'checkcolumn',
                    header        : 'Done',
                    dataIndex     : 'done',
                    width         : 40,
                    stopSelection : false
                }, {
                    text         : 'Edit',
                    width        : 40,
                    menuDisabled : true,
                    xtype        : 'actioncolumn',
                    tooltip      : 'Edit task',
                    align        : 'center',
                    icon         : '../simple-tasks/resources/images/edit_task.png',
                    handler      : function (grid, rowIndex, colIndex, actionItem, event, record, row) {
                        Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : ''), record.get('task'));
                    },
                    // Only leaf level tasks may be edited
                    isDisabled   : function (view, rowIdx, colIdx, item, record) {
                        return !record.data.leaf;
                    }
                }]
        });
    
    
        tree.getView().on('refresh' ,function() {
            console.log('refresh')
        })
    });

  2. #2
    Sencha Premium User
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    3,153

    Default

    Fiddle, first use filter then drag drop

    https://fiddle.sencha.com/#view/editor&fiddle/1rm2

  3. #3
    Sencha - Support Team
    Join Date
    Oct 2011
    Posts
    4,108

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

Similar Threads

  1. Replies: 2
    Last Post: 25 May 2012, 8:23 PM
  2. Replies: 1
    Last Post: 1 Nov 2011, 11:27 PM
  3. How to stop node removal after tree node drag and drop
    By mark.wharton in forum Sencha Ext JS Q&A
    Replies: 2
    Last Post: 20 Feb 2009, 7:49 AM
  4. Drag and drop tree doesnt refresh?
    By Leh8 in forum Ext GWT: Help & Discussion (1.x)
    Replies: 7
    Last Post: 15 Jan 2009, 8:53 PM
  5. Replies: 6
    Last Post: 4 Jul 2008, 4:59 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •