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

    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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    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
    Sencha Architect Development Team

  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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,358
    Vote Rating
    128
    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
    Sencha Architect Development Team

  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