PDA

View Full Version : how to display directory path belonging to selected node in TreePanel



kliphuis
14 Nov 2010, 6:11 AM
I just started programming ExtJs and I'm using it to create a web service (form) in which
users can select information about climate data they want to plot.

So far I was able to come up with something nice (see attachment below) but I'm now getting very frustrated.
In my opinion I want something very simple. I have a form with a textfield with name 'directory'
and a treepanel next to it in which a user can select a directory. As soon as the user clicks on a
node in the Tree a string containing the directory path e.g. 'run002/2D_3hrly' should be put in
the 'Directory' textfield. I am trying to get this working in the last 2 days but failed!
I looked on the web and found similar problems but still I did not get it working.
I am able to get the path node id's in the textfield (i.e. /rootnode/2/3)
but not the path itself. If someone can help me with this I will be very thankful.

Here is some more info:
I fill the TreePanel with a php script sample.php containing simple JSON code, see below.

sample.php
[
{ id: '1', text:'run001', leaf: true },
{ id: '2', text:'run002',
children: [{
id: '3', text: '2D_3hrly',
children: [{
id: '4', text: 'u', leaf: true},{
id: '5', text: 'v', leaf: true
}]
}]
}
]


I start the .js file with:

Ext.onReady(function() {

var treeLoader = new Ext.tree.TreeLoader({
dataUrl:'sample.php'
});

var rootNode = new Ext.tree.AsyncTreeNode({
text: '',
id: 'rootnode'
});

Then I start filling the form with items. Here is the code of the treepanel item in my form:

..
..
,items:[{
xtype: 'treepanel',
id: 'assistanttree',
animate: true,
autoScroll: true,
rootVisible: true,
loader: treeLoader,
root: rootNode,
listeners: {
click: function(node,event){
// The node argument represents the node that
// was clicked on within your TreePanel
Ext.Msg.alert('clicked root is nu:',node.attributes.text);
var path = node.getPath();
var tree=Ext.getCmp('assistanttree');
tree.getRootNode().expand(true);

document.getElementById('directory').value=path;
// I tried everything below but nothing works. I thought it would be simple ;-(
//tree.expandPath(path);
//document.getElementById('directory').value=tree.expandPath(path);
//document.getElementById('directory').value=Tree.selectPath(Tree.getNodebyId(4).getPath());
//document.getElementById('directory').value=tree.selectPath(node.getPath());
//document.getElementById('directory').value=tree.expandPath('/rootnode/1');
//document.getElementById('directory').value=tree.expandPath(path);


}
}

}]


Thanks,
Michael