1. #1
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default groupsummary within columnTree

    groupsummary within columnTree


    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/JaffaRI...ultiGroup.html
    http://max-bazhenov.com/dev/ux.maxim...ble/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?

    Code:
    	
    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
    Attached Images