PDA

View Full Version : Append node TreePanel and scope/layout (I think...)



springrider
20 Oct 2010, 4:53 AM
Good morning

I am a complete beginner in EXt Js (2 days) and i am trying to develop an application based on this Google earth plugin (http://code.google.com/p/ext-js-google-earth-api/) and i need to generate the tree panel using an XML. I have explored the XML tree example (http://dev.sencha.com/deploy/dev/examples/tree/xml-tree-loader.html).

I start getting something but i am struggling a bit in adding new nodes to my tree after the treepanel has been created.

This is my treepanel based on an XML which generates:
-Node A
-Node B
-Node C

Sample of my GE.JS file


onEarthReady: function(object){

this.earth = object;
...

this.kmlTreePanel = new Ext.tree.TreePanel({
title: 'KML Layers',
labelAlign: 'top',
useArrows:true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.app.MapsLoader({
dataUrl:'maps-tree.xml',
requestMethod : "GET"
}),
listeners: {checkchange: {fn: function(node, checked){
node.attributes.kml.setVisibility(checked);
}}}
});I have 3 different issues:
The first one is to try to understand why when i tried to add a new node to my treepanel in the following code, Node 2 is displayed but not node 1...

Sample of my GE.JS file

fetchKml: function(kmlUrl){
var MyNode1 = new Ext.tree.TreeNode({
id:1,
text: "Node 1",
expanded: true,
iconCls: 'world',
leaf: false
});

this.kmlTreePanel.getRootNode().appendChild(MyNode1);

google.earth.fetchKml(this.earth, 'http://www.spc.int/taggingjoom/applications/data/KML/TaggingTrack1.kml', this.addKml.createDelegate(this));


},
// Add KML object (called by above function)
addKml: function(kmlObject){
var MyNode2 = new Ext.tree.TreeNode({
id:2,
text: "Node 2",
expanded: true,
iconCls: 'world',
leaf: false

});

this.kmlTreePanel.getRootNode().appendChild(MyNode2);
.....
The fetch function is called from my HTML page.

My second issue is that the node 2 is always added first before the nodes from the XML even if onEarthReady is called first.
I always got:
-Node 2
-Node A
-Node B
...
while it should be
...
-Node B
-Node C
-Node 2


By the way, using getNodeById on these 'XML' nodes (A, B, C) does not work while on Node 2 for example (getNodeById(2)) , it works. It is like these nodes are not existing before the generation of the final layout.

At last (sorry for the length), my third issue is to understand why adding a node just after the treepanel creation just does not work. In the following example, Node 3 never appears:


this.kmlTreePanel = new Ext.tree.TreePanel({
title: 'KML Layers',
labelAlign: 'top',
useArrows:true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode(),
loader: new Ext.app.MapsLoader({
dataUrl:'maps-tree.xml',
requestMethod : "GET"
}),
listeners: {checkchange: {fn: function(node, checked){
node.attributes.kml.setVisibility(checked);
}}}
});
var MyNode3 = new Ext.tree.TreeNode({
id:3,
text: "Node 3",
expanded: true,
iconCls: 'world',
leaf: false
});

this.kmlTreePanel.getRootNode().appendChild(MyNode3);Sorry for not my ignorance, i search everywhere and didn't find any solution.
Hope my long email makes sense for you.

Thanks in advance for your help and your replies

Sylvain

Condor
20 Oct 2010, 5:01 AM
1. No idea.
- Are you sure the scope is correct when calling fetchKml?
- Are you sure there not already is a node with id:1?

2. You need to add the '2' node after the parent node has loaded (try adding the node from the load event). Same reason why getNodeById isn't working for the A-C nodes.

3. #2 proably already fixes that.

springrider
20 Oct 2010, 3:33 PM
Thanks Condor

Adding

this.kmlTreePanel.getRootNode().expand();
after creating the treepanel, makes the root tree available for adding new nodes and fixes points 1 and 3.
The problem is that my XML nodes are still added at the end (Point 2). Could it be related to AsyncTreenode definition.
I think i am mixing creation of objects in the code and availability of them linked to events.

It seems that the final tree with my XML nodes is created only after a specific event (Probably load event if i well understood), while i would need the treePanel to be available after its creation for further updates before the event occurs.

Any other thoughts on this

Sylvain