Results 1 to 8 of 8

Thread: Tree not rendering after Ajax call

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    384

    Question Tree not rendering after Ajax call

    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({
    title:'User',
    useArrows:true,
    containerScroll:true,
    animate:true,
    autoScroll:true,
    animate:true,
    enableDD:true,
    border:false,
    loader: {
    dataUrl: 'php/getdata.php',
    },
    root: {
    nodeType:'async',
    text:'Root',
    draggable:false
    }
    });

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

    var nav_tabs = new Ext.TabPanel({
    defaults : {
    autoScroll : true
    },
    activeTab: 0,
    items: [
    nav_tabs_user
    ]
    });

    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?

    Thanks


  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    384

    Default

    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.

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Yes, there is probably something wrong with the server response.

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    384

    Default

    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. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    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. #7
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    384

    Default

    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.

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Put a breakpoint in the Ext.tree.TreeLoader handleResponse and handleFailure methods and step from there.

Similar Threads

  1. reload tree panel on ajax call
    By nityajs in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 28 Sep 2009, 1:50 AM
  2. [TreeTable] load a tree opened at second level with one ajax Call
    By joelafousse in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 6 Oct 2008, 4:26 AM
  3. Tree with AJAX call to JSP
    By vayumahesh in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 4 Aug 2008, 12:27 PM
  4. Ajax callback is executed before Ajax call returned
    By mxu in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 31 Dec 2007, 12:42 AM
  5. How to process ajax call result + Tree
    By iliakan in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 15 Aug 2007, 12:13 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •