View Full Version : Tree not rendering after Ajax call

4 Oct 2010, 11:26 PM
I'm having some trouble getting a tree to render in a TreePanel. It
doesnt seem to render the tree from the date returned from an Ajax
call. Its a slightly complex example because the tree is inside a tab
panel, inside a panel.

The code is as follows:-

Tree Panel is :-

var nav_tabs_user = new Ext.tree.TreePanel({
loader: {
dataUrl: 'php/getdata.php',
root: {

The tree is contained in a tabl panel as follows:-

var nav_tabs = new Ext.TabPanel({
defaults : {
autoScroll : true
activeTab: 0,
items: [

Finally the tab panel is rendered in a regular panel

var nav = new Ext.Panel({
title : 'Data',
region : 'west',
split : true,
width : 200,
collapsible : true,
collapseMode : 'mini',
items: nav_tabs

The data returned from the getdata.php call is

[{ id: "1": text: "No Children", leaf: true}]

Firebug confirms the response data is as above (I just cut and paste).

Any idea how to start debugging this?


5 Oct 2010, 12:35 AM
1. This is overnested. Why do you need the 'nav' panel? Just use the nav_tabs as the west region.
2. If you want to keep using the 'nav' panel then at least give it a layout (e.g. 'fit').
3. You probably want rootVisible:false on the tree or expanded:true on the root node.

5 Oct 2010, 11:52 AM
Thanks for the reply - appreciate that :)

Unfortunately these wont help - I tried them just in case. I've struggled a bit with
this for some reason, and cant really see what the problem is.

I use the nested nature of the panels because - if you dont have the outer 'nav'
panel in the code above - its impossible to set a Title for the tabpanel. Using
the outer panel was the only way I could get that to work.

When I click on the root node in the tree - it does the Ajax call, and the sever returns
the JSON string, but the tree doesnt change. I guess I'll have to try and step through
the treepanel code.

5 Oct 2010, 11:15 PM
Yes, there is probably something wrong with the server response.

6 Oct 2010, 1:52 PM
Server is OK, I wonder if the tree is not rendering because its in a tab in a panel. I'll try just using a plane html page.

6 Oct 2010, 10:51 PM
How is it in a tabpanel? It the tree one of the items or are you overnesting your layout?

(can you post your layout code?)

7 Oct 2010, 11:35 AM
The 'nav' panel given is placed in a Ext.Window and sits in the west. There is no
extra nesting other than the code above. I've tried flattening
the panel to just the tree panel but it just doesnt seem to do anything. Quite awkward
to debug - not quite sure where to put my break point so it captures what happens at
the Ajax return.

7 Oct 2010, 11:17 PM
Put a breakpoint in the Ext.tree.TreeLoader handleResponse and handleFailure methods and step from there.