Extjs4.2.1 - Load json to treepanel fails

Question

I create a treepanel and I and create store like

          var store = Ext.create('Ext.data.TreeStore', {
            autoload: false,
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'                 
                }
            }
          });

my server print json look like

{ "results": 
    [
    { id : '1' , text : '1', expanded: true, 
        children :[
            { id : '5' , text : '5', leaf:true},
            { id : '6' , text : '6', leaf:true}
        ]
    },
    { id : '2' , text : '2', leaf:true},
    { id : '3' , text : '3', leaf:true},
    { id : '4' , text : '4', leaf:true},
    { id : '7' , text : '7', leaf:true},
    { id : '8' , text : '8', leaf:true},
    { id : '9' , text : '9', leaf:true},
    { id : '10' , text : '10', expanded: true, 
        children :[
            { id : '11' , text : '11', leaf:true},
            { id : '12' , text : '12', leaf:true}
        ]
    }
    ]
}

But when i run my code, i see firebug and that always run GET http://localhost/example/data.php... never stop :(

and my tree is added so much double

How to fix that thank

Edit
In real i define my treepanel with alias and using it as xtype
But i create new example and get same problem. Here is my js

var store = Ext.create('Ext.data.TreeStore', {
            autoload: false,
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'                 
                }
            }
        });

        Ext.create('Ext.tree.Panel', {
            title: 'Simple Tree',
            width: 200,
            height: 150,
            store: store,
            rootVisible: false,
            renderTo: Ext.getBody()
        });

And here is my data.php

echo "
{
    'success': true, 
    'variable': 100, 
    'results': 
    [
    { id : '1' , text : '1', expanded: true, 
        children :[
            { id : '5' , text : '5', leaf:true},
            { id : '6' , text : '6', leaf:true}
        ]
    },
    { id : '2' , text : '2', leaf:true},
    { id : '3' , text : '3', leaf:true},
    { id : '4' , text : '4', leaf:true},
    { id : '7' , text : '7', leaf:true},
    { id : '8' , text : '8', leaf:true},
    { id : '9' , text : '9', leaf:true},
    { id : '10' , text : '10', expanded: true, 
        children :[
            { id : '11' , text : '11', leaf:true},
            { id : '12' , text : '12', leaf:true}
        ]
    }
    ]
}";

Answer 1

What you have here is something I consider to be a bug in the treestore. When you change the reader to use a root that isn't children, you also need to change every instance of the children property name in the data to the new name too. That means if you want to change the root to results, your tree data would actually have to look something like this:

echo "
{
    'success': true, 
    'variable': 100, 
    'results': 
    [
    { 'id' : '1' , 'text' : '1', 'expanded': true, 
        'results':[
            { 'id' : '5' , 'text' : '5', 'leaf':true},
            { 'id' : '6' , 'text' : '6', 'leaf':true}
        ]
    },
    { 'id' : '2' , 'text' : '2', 'leaf':true},
    { 'id' : '3' , 'text' : '3', 'leaf':true},
    { 'id' : '4' , 'text' : '4', 'leaf':true},
    { 'id' : '7' , 'text' : '7', 'leaf':true},
    { 'id' : '8' , 'text' : '8', 'leaf':true},
    { 'id' : '9' , 'text' : '9', 'leaf':true},
    { 'id' : '10' , 'text' : '10', 'expanded': true, 
        'results':[
            { 'id' : '11' , 'text' : '11', 'leaf':true},
            { 'id' : '12' , 'text' : '12', 'leaf':true}
        ]
    }
    ]
}";

The other option is to change the top level results property name to children and mark the root of your store as children.

Answer 2

check your autoLoad config spelling.

 var store = Ext.create('Ext.data.TreeStore', {
        //    autoload: false,
            autoLoad : false,
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'                 
                }
            }
          });

Answer 3

Can you just add root data to store like follow

var store = Ext.create('Ext.data.TreeStore', {
            autoLoad : false,
            root: {
                text: 'Corporate Media',
                id: '0',
                expanded: true
            }
            proxy: {
                type: 'ajax',
                url: 'data.php',
                reader: {
                    type: 'json',
                    root: 'results'                 
                }
            }
          });