JSON - AJAX - Treestore

[iunds]

Hello,

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

{"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:

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.

[martijn1967b]

try the config option in your store

autoLoad: true

[iunds]

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.

[martijn1967b]

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?

[iunds]

Ok, i have solved the problem.

The Json has to look like this:

{"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.

[vandanachadha]

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' }]}"

[brunopbarrote]

u can try this

                  var jsonDecode = Ext.JSON.decode(response.responseText).d;
                  var decode = Ext.decode(jsonDecode); 
                  alert(decode.msg);

[vandanachadha]

Thanks for your suggestion which is correct. I had meanwhile implemented using solution an an earlier form, on the same lines as your suggestion, and that worked http://www.sencha.com/forum/showthre...-service/page2

[andwish]

Ok, i have solved the problem.

The Json has to look like this:

{"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!!