Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    4
    Vote Rating
    0
    iunds is on a distinguished road

      0  

    Question JSON - AJAX - Treestore

    JSON - AJAX - Treestore


    Hello,

    i want to load a complete Tree with ajax at once. My get-tree.php returns following json:

    Code:
    {"root":{"expanded":true,"children":[{"text":"Suche","leaf":true},{"text":"Projekt","expanded":true,"children":[{"text":"Planung","leaf":true},{"text":"Pruefung","leaf":true}]},{"text":"Abmelden","leaf":true}]}}
    My app.js looks like:

    Code:
    Ext.onReady(function() {
        /*var store = Ext.create('Ext.data.TreeStore', {
            root: {
                expanded: true, 
                children: [
                    { text: "Suche", leaf: true },
                    { text: "Projekt", expanded: true, children: [
                        { text: "Planung", leaf: true },
                        { text: "Pruefung", leaf: true}
                    ] },
                    { text: "Abmelden", leaf: true }
                ]
            }
        });*/
        
        var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url : 'get-tree.php',
                reader: {
                    type: 'json',
                    root: 'children'
                }
    
            }
        });
        
        Ext.create('Ext.Viewport', {
            renderTo: Ext.getBody(),
            border: false,
            layout: {
                type: 'border',
                padding: 5
            },
            items: [{
                xtype:'treepanel',
                region:'west',
                title:'Navigation',
                width: 200,
                height: 150,
                store: store,
                rootVisible: false, 
                margins: '5 0 0 0',
                cmargins: '5 5 0 0',
                collapsible: true,
                width: 175
            },{
                region:'center',
                margins: '5 0 0 0',
                xtype: 'panel',
                title: 'main',
                id: 'main',
                html: 'Willkommen'
            }]
        });
    })
    The local static store works but the ajax store does not. What is wrong with it?
    Thanks for the help.

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Location
    Nijmegen, the Netherlands
    Posts
    13
    Vote Rating
    0
    martijn1967b is on a distinguished road

      0  

    Default


    try the config option in your store

    autoLoad: true

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    4
    Vote Rating
    0
    iunds is on a distinguished road

      0  

    Default


    Thanks for the answer.
    With autoLoad:true its the same. The treepanel is just empty.
    With firebug i see the call from get-tree.php and the answer with the valid json.

  4. #4
    Sencha User
    Join Date
    Mar 2009
    Location
    Nijmegen, the Netherlands
    Posts
    13
    Vote Rating
    0
    martijn1967b is on a distinguished road

      0  

    Default


    I noticed you don't have a root node hanging in your tree. I guess yor problem will be solved when adding a root node into your store or tree. Did it not complain about missing root node?

  5. #5
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    4
    Vote Rating
    0
    iunds is on a distinguished road

      0  

    Default


    Ok, i have solved the problem.

    The Json has to look like this:

    Code:
    {"text":".","children": [
        {
            text:'Suche',
            leaf:true,
            iconCls:'text'
        },{
            text:'Projekte',
            iconCls:'text-folder',
            children:[{
                text:'Planung',
                leaf:true,
                iconCls:'text'
            },{
                text:'Pruefung',
                leaf:true,
                iconCls:'text'
            }]
         },{
            text:'Abmelden',
            leaf:true,
            iconCls:'text'
        }
    ]}
    Please close this Thread.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    5
    Vote Rating
    0
    vandanachadha is on a distinguished road

      0  

    Default Same problem, tried your solution, but did not work

    Same problem, tried your solution, but did not work


    Hi, I am facing the same problem since last 1 week, but not managed ot tackle it yet. I have taken your identical js file, and passed a minimized string back, with values based on what you have suggested: something like
    return "{\"text\":\".\",\"children\": [ { text:'Suche', leaf:true, iconCls:'text' }]}";

    But this basic string is also not taken in correctly and the navigation panel on the left remains empty. Please suggest what could be wrong.

    When I see in firebug, the returned json shows up for "d":


    "{"text":".","children": [ { text:'Suche', leaf:true, iconCls:'text' }]}"

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    39
    Vote Rating
    0
    brunopbarrote is on a distinguished road

      0  

    Default


    u can try this
    Code:
                      var jsonDecode = Ext.JSON.decode(response.responseText).d;
                      var decode = Ext.decode(jsonDecode); 
                      alert(decode.msg);

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    andwish is on a distinguished road

      0  

    Default


    Quote Originally Posted by iunds View Post
    Ok, i have solved the problem.

    The Json has to look like this:

    Code:
    {"text":".","children": [
        {
            text:'Suche',
            leaf:true,
            iconCls:'text'
        },{
            text:'Projekte',
            iconCls:'text-folder',
            children:[{
                text:'Planung',
                leaf:true,
                iconCls:'text'
            },{
                text:'Pruefung',
                leaf:true,
                iconCls:'text'
            }]
         },{
            text:'Abmelden',
            leaf:true,
            iconCls:'text'
        }
    ]}
    Please close this Thread.
    Solved my problem too. Thanks!!