is it possible to do a treePanel without loader?

[zab]

Hi,

I want to implement a tree in a panel. I'm very confusing because I don't found how make a tree without loader : I want to construct the tree with data that I already have, I don't want to have any php which provide my data...
I don't found how to do that in the API and in the forum... Is it possible???

[Animal]

JUst use a loader, You can create a tree from data. The loader loads it.

[zab]

euh ok, but the loader take a url in config. If my data are in my script, I put the url of my script in the loader config? I don't understand very well how it works...

[Animal]

It's optional. You can specify children like the example here does: http://dev.extjs.com/deploy/dev/docs/?class=Ext.Viewport

Or you can programatically add new Ext.tree.TreeNodes

[zab]

Thanks! It's just the example that I need!

[zab]

With the animal's answer, I make my tree without problem. But now, I try to programatically add node.
So I initiate my new node:

var compoz = new Ext.tree.TreeNode({
id: 'compo1',
text: 'composant1',
leaf: false
});

and then I try to add this at the root of my tree (pan_menu is my tree):


var R = pan_menu.getRootNode();
R.appendChild(compoz);
pan_menu.getLoader().load();

but I have an error in firebug :
A has no properties
TreeLoader(undefined, undefined)ext-all.js (line 105)
Menu_compo()framework_IHM.js (line 376)
Menu()framework_IHM.js (line 317)
Pan_gauche()framework_IHM.js (line 300)
getIHM()framework_IHM.js (line 11)
Observable()ext-all.js (line 12)
EventManager()ext-all.js (line 13)
[Break on this error] Ext.tree.TreeLoader=function(A){this.baseParams={};this.requestMethod="POST";Ext...
ext-all.js (line 105)

what's wrong?

[Animal]

Use AsyncTreeNode

[zab]

I tried with

var compoz = new Ext.tree.AsyncTreeNode({
id: 'composant',
text: 'Composant1',
leaf: false
});

but I have the same error.
the root of my tree is already an AsyncTreeNode...

PS: thanks for your rapidy!!! it's very cool :)

[Animal]

Don't call load.

[zab]

ah ok. It works. thanks.

[zab]

sorry, I wasn't test the good version... :">
if I don't call load, there is not error, but My node is not append to my tree...

here my new code to append a node:



var compoz = new Ext.tree.AsyncTreeNode({
id: 'composant',
text: 'test',
leaf: false
});

var R = pan_menu.getRootNode();
R.appendChild(compoz);


here my tree:

var pan_menu = new Ext.tree.TreePanel({
id:'pan_menu_compo',
frame:true,
title: 'Menu Composants',
region : 'center',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: []
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
});

[zab]

sorry, I'm stupid!!!

I hadn't define my root... it's ok now, it works.

[zab]

(:| In fact, it doesn't work... what I saw was the child of my root... My new node isn't append to my tree...
I don't understand...

[Animal]

Perhaps you should make a little page to show us.

Make it in examples/tree so we can run it entirely unchanged.

[zab]

ok, so here I put my code in an entire example :

var pan_menu = new Ext.tree.TreePanel({
id:'pan_menu_compo',
frame:true,
title: 'Menu Composants',
region : 'west',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
id: 'root',
text: 'Composants',
leaf: false
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
});

var compoz = new Ext.tree.AsyncTreeNode({
id: 'compo1',
text: 'test',
leaf: true
});

var R = pan_menu.getRootNode();
R.appendChild(compoz);


Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, pan_menu, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});


});

I also tried with pan_menu.getNodeById, but I have an error like "R has no properties..."

[mabello]

Myabe you can try this extension, it's also could help to understand how TreeLoader works...

http://extjs.com/forum/showthread.php?t=26510

Hope this helps...

[Animal]

Here, I created a full drop-in page for you. Drop this into examples/tree:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A Tree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
var pan_menu = new Ext.tree.TreePanel({
id:'pan_menu_compo',
frame:true,
title: 'Menu Composants',
region : 'west',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode({
id: 'root',
text: 'Composants',
}),
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
});

var compoz = new Ext.tree.AsyncTreeNode({
id: 'compo1',
text: 'test',
leaf: true
});

var R = pan_menu.getRootNode();
R.appendChild(compoz);


Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, pan_menu, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});


});
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
</body>
</html>

[zab]

thank you for all your help, I'm very sorry if my question is stupid, but I don't understand what you want I do...

Have I to copy your code and drop into a new post in another part of this forum?

[Animal]

That's your code. I fixed it.

[Animal]

You've never seen the examples/* directories?

[zab]

yes, I saw it in the librairie Ext, but I never add file in this directorie

[zab]

so, thanks for this fix. It works well now.

[zab]

Hi,

I have another problem with my tree : with the Animal's solution, I can add nodes to the root. But If I use the same method with getNodeById for another node, it doesn't work...
I found many problems with getNodById() in the forum, but I didn't find any simple solution...

Here an example page with this problem :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A Tree</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
var pan_menu = new Ext.tree.TreePanel({
id:'pan_menu_compo',
frame:true,
title: 'Menu Composants',
region : 'west',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode({
id: 'root',
text: 'Composants',
}),
listeners: {
click: function(n) {
Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
}
}
});

var compoz = new Ext.tree.AsyncTreeNode({
id: 'compo1',
text: 'test',
leaf: true
});

var act = new Ext.tree.AsyncTreeNode({
id: 'act1',
text: 'act1',
leaf: true
});

var R = pan_menu.getRootNode();
R.appendChild(compoz);

var C = pan_menu.getNodeById('compo1');
C.appendChild(act);

Ext.onReady(function(){

new Ext.Viewport({
layout: 'border',
defaults: {
activeItem: 0
},
items: [{
region: 'north',
html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, pan_menu, {
region: 'center',
xtype: 'tabpanel',
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}, {
region: 'south',
title: 'Information',
collapsible: true,
html: 'Information goes here',
split: true,
height: 100,
minHeight: 100
}]
});


});
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
</body>
</html>

the act node isn't append to compoz...

[zab]

I don't have solve my problem...
anybody have any idea?

I have a constraint: I can't use any php file.