Adding JSON-based tree in Designer 2 always shows empty panel

[DroidIn.net]

I've been banging my head for 2 days now and I can't make my data to display in the TreePanel using data from my server. I've search and tried all the solutions on forum and I've been through documentation and examples to no avail.
Here's the code:

Model

Ext.define('QuiApp.model.ReportTreeNode', {
    extend: 'Ext.data.Model',


    idProperty: 'execId',


    fields: [
        {
            name: 'execId'
        },
        {
            name: 'name'
        },
        {
            name: 'parentId'
        },
        {
            name: 'factoryName'
        },
        {
            name: 'execCount'
        }
    ]
});

Store

Ext.define('QuiApp.store.base.ReportTreeStore', {
    extend: 'Ext.data.TreeStore',
    requires: [
        'QuiApp.model.ReportTreeNode'
    ],


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'ReportTreeStore',
            model: 'QuiApp.model.ReportTreeNode',
            proxy: {
                type: 'ajax',
                url: 'http://localhost:8080/qui/reports/tree/viewTree.action',
                reader: {
                    type: 'json',
                    idProperty: 'id',
                    messageProperty: 'msg',
                    root: 'root'
                }
            }
        }, cfg)]);
    }
});

Panel:

Ext.define('QuiApp.view.ui.MyPanel1', {
    extend: 'Ext.panel.Panel',


    id: 'MenuPanel',
    width: 150,
    layout: {
        type: 'accordion'
    },
    region: 'west',
    split: true,


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'treepanel',
                    height: 200,
                    id: 'reportTree',
                    itemId: 'reportTree',
                    width: 200,
                    autoScroll: true,
                    collapsed: false,
                    title: 'Reporting',
                    store: 'ReportTreeStore',
                    rootVisible: false,
                    viewConfig: {
                        id: 'ReportingTree',
                        emptyText: 'Quantum',
                        loadingText: 'Please wait',
                        rootVisible: false
                    }
                }
            ]
        });


        me.callParent(arguments);
    }


});

And the JSON I get from server

[
    {
        "name": "foo",
        "id": "foo",
        "type": "FACTORY",
        "children": [
            {
                "name": "job",
                "id": "job",
                "type": "JOB",
                "children": null,
                "execId": "job",
                "leaf": true,
                "execCount": 10,
                "factoryName": "foo",
                "parentId": "foo",
                "text": "job",
                "cls": "file"
            }
        ],
        "execId": "foo",
        "leaf": false,
        "execCount": 10,
        "factoryName": "boo",
        "parentId": "boo",
        "text": "foo",
        "cls": "folder"
    }
]

In Designer2-beta Build: 288 I'm able to load data into the store with no problem however I only see empty root folder (non name). And when I run the code I get just empty panel

[bharatn]

Try adding root in the data

"root": { "name": "foo",

And specifying root for the reader
reader:{ type:'json', root:'root'}

See nested example here

[DroidIn.net]

Didn't really help. With the JSON below I can see 4 nameless folders in Designer and nothing in the running app

{
    "root": "root",
    "name": "src",
    "id": "src",
    "type": null,
    "children": [
        {
            "name": "foo",
            "id": "foo",
            "type": "FACTORY",
            "children": [
                {
                    "name": "job",
                    "id": "job",
                    "type": "JOB",
                    "children": null,
                    "execId": "job",
                    "leaf": true,
                    "execCount": 10,
                    "factoryName": "foo",
                    "parentId": "foo",
                    "text": "job",
                    "cls": "file"
                }
            ],
            "execId": "foo",
            "leaf": false,
            "execCount": 10,
            "factoryName": "boo",
            "parentId": "boo",
            "text": "foo",
            "cls": "folder"
        }
    ],
    "execId": "src",
    "leaf": false,
    "execCount": 0,
    "factoryName": null,
    "parentId": null,
    "text": "src",
    "cls": null
}

[bharatn]

Seems like you may be hitting this issue
http://www.sencha.com/forum/showthre...or-a-Treestore

See if adding custom root config for the treeStore fixes the issue.
I am attaching a project with your example as well.

[DroidIn.net]

Did that. Still no luck. When I add root definition I still see 4 closed folders. And if I change JSON back to what I have in the original post all I gain is that I see a single nameless folder in the editor and still nothing in the actual running app

[aconran]

Sounds like its working when you see the nameless folders.

You want to change your displayField from the default of text to match your JSON data to "name".

[DroidIn.net]

Thanks Aaron, now I'm getting somewhere. I'm able to load folders into designer now however when I run the code I don't think that AJAX request is getting executed since I still see nothing in the tree pane. I have autoLoad="true" but nothing is loaded

[aconran]

Do you see the request being made in the browser?

Is the store being populated?

[DroidIn.net]

Thank you, this has been resolved. I had to remove "root" property in Reader to make it work