PDA

View Full Version : groupsummary within columnTree



2 Dec 2009, 3:19 AM
Hi,

I would like to extend Ext.ux.tree.columnTree to display a dynamically calculated total field for each node, calculated from a sum of all its child nodes.

I've tried a few methods to achieve this functionality but I'm not having much luck. The best method I've come up with is to iterate all nodes within the TreeLoader on the load event. This works with the exception of the root level nodes. For some reason I'm unable to set values on the root level nodes.

I've come across the following in my travels
http://jaffa.sourceforge.net/JaffaRIATests/tests/extjs/multigroup/MultiGroup.html
http://max-bazhenov.com/dev/ux.maximgb.tg/examples/client_editable/index.html

I'm after a cross of the 2, dynamically calculated subtotals for nodes in a grid like view. The ultimate goal is to be able to drag extra items in from another tree and have the totals dynamically update.

I don't think the following is what I should be doing to achieve this functionality but can't find anything else that does what I need. I've only been using Ext for 2 weeks so if I've missed something obvious please let me know.

Does anyone have any ideas or pointers?



Ext.onReady(function(){
function traverseNodes(node) {
if (node.children) {
var total = 0;
for(var i=0; i<node.children.length; i++){
total += traverseNodes(node.children[i]);
}
node.amount = total;
}
return node.amount;
}

var myTreeLoader = new Ext.tree.TreeLoader({
dataUrl:'column-data.json',
preloadChildren:true,
uiProviders:{
'col': Ext.ux.tree.ColumnNodeUI
},
autoload:true,
listeners: {
load : function(sender, node, callback){
for(var i=0; i<node.childNodes.length; i++){
traverseNodes(node.childNodes[i].attributes);
}
},

},
});

var tree = new Ext.ux.tree.ColumnTree({
width: 550,
height: 300,
rootVisible:false,
autoScroll:true,
title: 'Nominals',
renderTo: Ext.getBody(),
columns:[{header:'Nominal Code', width:330, dataIndex:'nominal'},
{header:'Amount', width:100, dataType:'money', dataIndex:'amount'},
{header:'Assigned To', width:100, dataIndex:'user'}],
loader: myTreeLoader,
root: new Ext.tree.AsyncTreeNode({
text:'Nominals'
})
});
});


The attached image is the output from the above code

Any help is greatly appreciated

Thanks

Tom