PDA

View Full Version : TreePanel childeen nodes access



yo_haha
17 Oct 2012, 3:20 AM
Hi,

I have a TreePanel which I fill by setting children to its root:


root: {
nodeType: "async",
expanded : true,
children: [{
text: 'Child 1',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [{
text: 'Child 1.1',
draggable: true,
checked: true,
leaf: true
} ...

When I try to reach the tree children by


tree.root.firstChild;

I get a null object.
The same thing with


tree.root.ChildNodes

However, the method


tree.root.hasChildNodes()

returns true.
Do you have an explanation?

Regards

willigogs
17 Oct 2012, 3:47 AM
What is your "tree" variable? Is it the ext component, or just the dom element?

yo_haha
17 Oct 2012, 4:39 AM
It's a Ext.tree.TreePanel

yo_haha
17 Oct 2012, 4:58 AM
Here is my tree :


tree = new Ext.tree.TreePanel({
useArrows: true,
animate: true,
title: "Couches",
enableDD: true,
loader: new Ext.tree.TreeLoader(),
root: {
nodeType: "async",
expanded : true,
children: [{
text: 'Fond de plan',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [{
text: 'Open Street Map',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
osm.setVisibility(checked);
}
}
},
{
text: 'Google Streets',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
googleStreets.setVisibility(checked);
}
}
},
{
text: 'Google Satellite',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
googleSatellite.setVisibility(checked);
}
}
}]
,listeners:{
'checkchange': function(node, checked){
node.eachChild(function(n) {
n.getUI().toggleCheck(checked);
});
}
}
},
{
text: 'Métier',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [{
text: 'Départements administratifs',
draggable: true,
checked: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
wms.setVisibility(checked);
}
}
}]
,listeners:{
'checkchange': function(node, checked){
node.eachChild(function(n) {
n.getUI().toggleCheck(checked);
});
}
}
},
{
text: 'Annotations',
checked: true,
draggable: false,
leaf: false,
expanded: true,
singleClickExpand: true,
children: [
{
text: 'Vecteurs',
checked: true,
draggable: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
vectors.setVisibility(checked);
}
}
},
{
id: 'text',
text: 'Textes',
checked: true,
draggable: true,
leaf: true,
listeners:{
'checkchange': function(node, checked){
if (checked) {
for ( var j = 0; j < popups.length; j++)
popups[j].show();
} else {
for ( var j = 0; j < popups.length; j++)
popups[j].hide();
}
}
}
}
]
,listeners:{
'checkchange': function(node, checked){
node.eachChild(function(n) {
n.getUI().toggleCheck(checked);
});
}
}
}
]
},
border: true,
region: "south",
height: 300,
split: true,
autoScroll: true,
containerScroll: true,
rootVisible: false,
lines: false
});

willigogs
17 Oct 2012, 5:17 AM
".firstChild" and ".ChildNodes" are not valid methods for the tree node, whereas "hasChildNodes()" is:
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.tree.TreeNode-method-hasChildNodes

yo_haha
17 Oct 2012, 7:20 AM
firstChild and ChildNodes are properties of a TreeNode so
tree.root.ChildNodes

should work normally and return an array of child nodes.

willigogs
17 Oct 2012, 8:07 AM
Hmmm, not sure what your issue might be, as they seem to be working correctly in this example:
http://jsfiddle.net/mgDqG/

(http://jsfiddle.net/mgDqG/)I admit that I'm not 100% familiar with the usage of trees in ext, but I do however notice that you build your root differently compared to the example and ext documentation (using nodeType: async?).

yo_haha
18 Oct 2012, 1:29 AM
Thank you very much for the example.
The problem was the tree.getRootNode().expand(); command that has to be performed after the tree is created.

yo_haha
18 Oct 2012, 2:09 AM
One other issur with this tree!
tree.getRootNode().firstChild.firstChild.getUI()
works fine and returns the child UI.
but
tree.getRootNode().firstChild.firstChild.getUI().getAnchor()
returns undefined. The same happens with: getEl()
while
tree.getRootNode().firstChild.firstChild.getUI().hide()
works and hides the node
and
tree.getRootNode().firstChild.firstChild.getUI().isChecked()
works but returns a wrong value. It returns false while the node is checked.

Any explanation to that?