PDA

View Full Version : Noob Tree Panel and Loader question



Entropy
30 Apr 2009, 5:51 AM
I am still learning extjs, and want to make sure I am barking up the right tree here (pun intended).

I want to load my tree with N top level nodes and upon clicking the +, I want an ajax call to load that node up. My demo has this working except for the ajax part. I have successfully hooked into the beforeexpand event, and simulated the data from javascript.

My understanding is that I should probably be using this TreeLoader object that the example uses to load the original data from a json file. But if this subsequent event had a different URL (for demo purposes I am putting the child data in a different json file) for each node to load, I need to tweak the URL before loading. But I am unsure how one is meant to interact with the loader at this point.

So code-wise, I'm initializing as such:


Ext.onReady(function(){
var tree = new Ext.tree.ColumnTree({
width: 550,
height: 300,
rootVisible:false,
autoScroll:true,
enableDD:false,
// title: 'Search Asset & Items',
renderTo: Ext.getBody(),

columns:[{
header:'ID',
width:125,
dataIndex:'identifier'
},{
header:'Description',
width:250,
dataIndex:'description'
},{
header:'Date',
width:100,
dataIndex:'date'
},{
header:'Aband No',
width:75,
dataIndex:'number'
}],
loader: new Ext.tree.TreeLoader({
dataUrl:'CATSTreeGrid-data.json',
uiProviders:{
'col': Ext.tree.ColumnNodeUI
}
}),
root: new Ext.tree.AsyncTreeNode({
text:'Tasks'
})//end root

}); //end new columnTree

tree.addListener('beforeexpandnode', expandnode);

});//end onready


So let's say I want that expandnode method to point to 'child.json' (I see how parameters would be used in the real environment, but I am taking one step at a time here). I am doing this:


function expandnode(node, bDeep, bAnimate)
{
if(!node.hasChildNodes())
{
node.getOwnerTree().loader.dataUrl = 'child.json';
//node.getOwnerTree().loader.load(node);
}
}


That commented out load is what I am stuck on. I have tried a few variations on the theme, but I clearly don't get how i am supposed to use the loader to load the subset of the nodes I want to. Am I way off base here? Is there a better way to skin this cat?

Entropy
30 Apr 2009, 6:24 AM
Oh yeah, in the load() the 2nd parm is supposed to be a callback function. But I didn't understand from the help what this callback is doing. Is it optional?

Condor
1 May 2009, 6:51 AM
Use:

loader: new Ext.tree.TreeLoader({
dataUrl: 'CATSTreeGrid-data.json',
uiProviders: {
'col': Ext.tree.ColumnNodeUI
},
listeners: {
beforeload: function(loader, node, callback){
loader.dataUrl = ... based on node ...
}
}
}),

Entropy
1 May 2009, 9:51 AM
Thanks for the suggestion, but that doesn't seem to be working. The difficulty seems to be that the node passed to me lacks it's identifying properties for some reason. For example, I have a node defined in the initial json file. It is one of 8 that load.


{
identifier: '08-ATF-026946',
description: 'salad',
date: '08/23/08',
number: '99',
uiProvider:'col',
cls:'master-task',
iconCls:'task-folder',
checked:false,
leaf: false,
expandable: true
}

I set the loader up similar to what you suggested:


loader: new Ext.tree.TreeLoader({
dataUrl: 'CATSTreeGrid-data.json',
uiProviders: {
'col': Ext.tree.ColumnNodeUI
},
listeners: {
beforeload: function(loader, node, callback)
{
if(node.text != 'Tasks')
{
loader.dataUrl = node.identifier + '.json';
alert('set url to: ' + loader.dataUrl);
}
}
}
}),


The alert reports that it is trying to load undefined.json. I've tried other alerts and it seems that .text does not exist either. .parentNode is the Tasks node, which is my root node.

Otherwise the behavior is that the + becomes a -, but no nodes are created.

I have a json file for each identifier key ready to load. They each look something like below. I presumed that the results of the secondary load should be only the children of the node being expanded.



[{
identifier: 1,
description: 'beef',
date: '',
number: '345',
uiProvider:'col',
leaf:true
}, {
identifier: 2,
description: 'bread',
date: '',
number: '456',
uiProvider:'col',
leaf:true
}, {
identifier: 3,
description: 'cheese',
date: '',
number: '5676',
uiProvider:'col',
leaf:true
}]

Condor
1 May 2009, 9:52 PM
It's: node.attributes.identifier

ps. If you node ids are unique you should use 'id' instead of 'identifier' (also used by TreePanel).