Sorry if this has been reported, I tried to search but didn't see anything.


REQUIRED INFORMATION Ext version tested:
  • Ext 4.2.0 rev 265
Browser versions tested against:
  • Safari 5.1.2 (windows)
  • IE8
  • FF 18.0.1
DOCTYPE tested against:
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Description:
  • When calling 'load' on the tree store after it has already been loaded once will duplicate Level 2 nodes. Additionally expanding the first Level 2 node will display the correct data, expanding the second Level 2 node will display the whole tree as a child.
Steps to reproduce the problem:
  • Take the TreeGrid example and add a reload button that will simply call 'store.load()'
The result that was expected:
  • Store to reload and data to remain the same (using the 'treegrid.json' file)
The result that occurs instead:
  • Store reloads and duplicate nodes are created
Test Case:
Code:
 Ext.application({
    name: 'app',
    appFolder: 'app',
    autoCreateViewport: false,
    requires: [
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.tree.*'
    ],
    controllers: [

    ],
    launch: function () {
        Ext.define('Task', {
            extend: 'Ext.data.Model',
            fields: [
            { name: 'task', type: 'string' },
            { name: 'user', type: 'string' },
            { name: 'duration', type: 'string' },
            { name: 'done', type: 'boolean' }
        ]
        });

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'Task',
            proxy: {
                type: 'ajax',
                url: 'treegrid.json'
            },
            folderSort: true
        });

        var tree = Ext.create('Ext.tree.Panel', {
            title: 'Core Team Projects',
            width: 500,
            height: 300,
            renderTo: Ext.getBody(),
            collapsible: true,
            useArrows: true,
            rootVisible: false,
            store: store,
            multiSelect: true,
            singleExpand: true,

            /* NEW CODE FOR BUG REPORT*/
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    xtype: 'button',
                    text: 'Reload',
                    handler: function () {
                        store.load();
                    }
                }]
            }],
            /* END NEW CODE FOR BUG REPORT*/

            //the 'columns' property is now 'headers'
            columns: [{
                xtype: 'treecolumn', //this is so we know which column will show the tree
                text: 'Task',
                flex: 2,
                sortable: true,
                dataIndex: 'task'
            }, {
                //we must use the templateheader component so we can use a custom tpl
                xtype: 'templatecolumn',
                text: 'Duration',
                flex: 1,
                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',
                flex: 1,
                dataIndex: 'user',
                sortable: true
            }, {
                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;
                }
            }]
        });
    }
});