PDA

View Full Version : How to dynamically add or rename a node to treegrid



craig2005
6 Jul 2012, 10:18 AM
Does anyone know how to dynamically add or rename a leaf node to a treegrid. I tried doing it via the store, but that didn't work.

Using the example below, how you would you dynamically add or rename a leaf node under "remodeling"?

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html

(http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/tree/treegrid.html)
Below is the example code for the above link.



Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);


Ext.onReady(function() {
//we want to setup a model and store instead of using dataUrl
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});


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: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//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
}]
});
});

scottmartin
6 Jul 2012, 5:51 PM
Have a look at the following:
http://jsfiddle.net/molecule/4Vvjz/

Scott.

craig2005
6 Jul 2012, 6:09 PM
That only works for a tree. Not a tree panel or a treegrid

scottmartin
6 Jul 2012, 9:15 PM
My mistake .. have a look at:



Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function() {
var task = store.getRootNode().findChild('task', 'Remodeling', true);
if (task) {
task.insertChild( 0,{ task:'Manual Entry', duration:0.25, user:'Sencha Support', leaf:true, iconCls:'task' } );
}
}
});


Scott.

craig2005
6 Jul 2012, 9:37 PM
I moved to an ajax proxy based solution. But this looks like it would work. Great job.

This is the part I couldn't get.


task.insertChild( 0,{ task:'Manual Entry', duration:0.25, user:'Sencha Support', leaf:true, iconCls:'task' } );