1. #1
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

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

    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

    Code:
    Ext.define('QuiApp.model.ReportTreeNode', {
        extend: 'Ext.data.Model',
    
    
        idProperty: 'execId',
    
    
        fields: [
            {
                name: 'execId'
            },
            {
                name: 'name'
            },
            {
                name: 'parentId'
            },
            {
                name: 'factoryName'
            },
            {
                name: 'execCount'
            }
        ]
    });
    Store

    Code:
    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:

    Code:
    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

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

  2. #2
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default

    Try adding root in the data

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

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

    See nested example here

    Bharat Nagwani
    Sencha Designer Development Team

  3. #3
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default

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

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

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    350
    Vote Rating
    1
    bharatn is on a distinguished road

      0  

    Default

    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.
    Attached Files
    Bharat Nagwani
    Sencha Designer Development Team

  5. #5
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default

    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

  6. #6
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    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".
    Aaron Conran
    @aconran

  7. #7
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default

    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

  8. #8
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    Do you see the request being made in the browser?

    Is the store being populated?
    Aaron Conran
    @aconran

  9. #9
    Touch Premium Member
    Join Date
    Aug 2009
    Location
    San Diego, CA
    Posts
    31
    Vote Rating
    0
    DroidIn.net is on a distinguished road

      0  

    Default

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

Thread Participants: 2

Tags for this Thread