View Full Version : treenode appendchild problem

5 Mar 2009, 6:03 AM
I'd like to append a gridPanel (grid) to a treenode (tn).
I try to do it in 2 different way:

var tn = new Ext.tree.Treenode ({...});
var grid = new Ext.grid.GridPanel ({...});

but it doesn't work and firebug log is:

cs[i].renderIndent is not a function

2-Create e new treenode

var rootLevel = new Ext.tree.TreeNode({
id: 'node_'+gridConfig.id,
icon: '../img/ext/s.gif',
text: "<div id='"+idDivRenderGrid+"'></div>",
leaf: true

In the second way I can see the grid, but the indent is wrong.
I'd like the grid is indent like the treenode rootLevel icon (the green icon) and not like its container.
I remember I just had a similar error but I wasn't able to indent the text near the treenode icon.
Have you got any suggestion?
I post the image of the tree, too
The red gridPanel has wrong position, it must have the same left margin of the green icon.

5 Mar 2009, 6:15 AM
Have you tried experimenting with the style by poking it with Firebug?

Because as you know, block elements like <divs> take their own line, unless they are floated left.

5 Mar 2009, 7:13 AM
I made some test.
I tried to change the style (display block) on every nested div element of my treenode, but nothing change.
I tried to test my page in ie7 too, and I have found a strange error.
I post the ie7 (2' image) and firefox (1' image) result.
this is the code that generate ie7 error

var testObj = document.getElementById(idDivRenderGrid);
alert(testObj ==null);

the alert tells me testObj is not null but the render function fails.
debug bar tells "unknown runtime error" at line 36718 of ext-all.js.
but that line doesn't exists in the ext-all.js file.
And I haven't change anything in that file.
in firefox I can see the grid with the correct data, but the grid is render in a wrong way, in fact you can see a scrollbar at the bottom of the image, and this is wrong.
thanks for any suggestion

5 Mar 2009, 7:16 AM
another thing.
I know the gridPanel container would have layout fit to work correctly.
But the treenode component doesn't have that property...
then...how can I fit the gridPanel to the treenode text area?
I think if I resolve this I resolve many layout problem....

5 Mar 2009, 7:16 AM
Are you experimenting with changing the CSS dynamicaly with Firebug? It should be a 5 minute job to work out the correct styling in Firefox, and then go back to teh code and implement it.

5 Mar 2009, 7:18 AM
The GridPanel does not have a Container. You are rendering it. You will have to manage its size!

5 Mar 2009, 7:31 AM
I'm changing the CSS dynamicaly with Firebug, but I still can't obtain the correct style.
Do I have to set the width of gridPanel manually before to render it?
and what about ie error? It seems to me very strange...

5 Mar 2009, 8:05 AM
You have to set the width.

How long have you been using ext? And you still use ext-all.js in development?

5 Mar 2009, 8:27 AM
For development I have rename the ext-all-debug.js file in ext-all.js.
I have tried to set the width, and it's ok.
Now I have to resolve the position of the grid.
I think I hav to modify the treenode template, writing a custom ui.
Now I have to leave, tomorrow I'll try.

5 Mar 2009, 8:58 AM
A custom TreeNodeUI is the way to go.

It could be that you have to make it extend Ext.Container, use an anchor layout, and anchor the child GridPanel at 100% width. That might work for you.

6 Mar 2009, 7:23 AM
I'm testing my code using a simple panel (panelA) insted of a grid Panel (I think the ie error depend on the gridPanel config or store).
I tried to modify the render function of my custom TreeNodeUI, but nothing change.
The strange thing is that if I analize the page with firebug the panelA main div is in the correct position and but in the page it is in a wrong position (I attach the image so you can understan better).
So I don't understan why the panelA is displayed in a wrong position.
this is code for my panelA

var panelA = new Ext.Panel({html:'test panel',layout:'anchor',anchor:'100% 100%'});

as you can see in the attach image the selected zone and the panelA would be the same part of the page. but it isn't so.
Only one question...I don't understand because I have to extend the Ext.Container for the custom TreeNodeUI.