-
Tree Duplicate Nodes
Sorry if this has been reported, I tried to search but didn't see anything.
REQUIRED INFORMATION Ext version tested: 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;
}
}]
});
}
});
