CODEWITHSUNDEEP
jsonextjstreepanel
Franz
Franz

Reputation: 31

Extjs, can't read a simple json inside a treepanel

I am in trouble trying to load a very simple json where nodes are nested inside "data" as showed below. I expect to get two nodes with text AAA and BBB, but I only get a tree with a couple of empty nodes with infinite children (each children with a single sub children).

test_lrymgr.json

{   
    "data": [
        {
            "text": ".",
            "children": [
                {
                    "nodename": "AAA",
                    "isvisible": true,
                    "expanded": false           
                },
                {
                    "nodename": "BBB",
                    "isvisible": true,
                    "expanded": false
                }
            ]
        }
    ],
    "metadata": { "success":true, "msg":"", "totalCount":1, "totalPages":1, "prevLink":"", "nextLink":""}
}

test_lrymgr.html

<html>
<head>

    <link rel="stylesheet" type="text/css" href="ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css" />
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
</head>
<body>

<script type="text/javascript">
    Ext.onReady(function () {

        try {

            //define model
            Ext.define('MyDataModel', {
                extend: 'Ext.data.Model',

                fields: [
                    { name: 'nodename', mapping: 'nodename' },
                    { name: 'isvisible', mapping: 'isvisible' }
                ],

            });

            //define store
            Ext.define('MyStore', {
                extend: 'Ext.data.TreeStore',

                storeId: 'idStoreLryManager',
                model: 'MyDataModel',

                proxy: {
                    type: 'ajax',
                    url: 'test_lrymgr.json',
                    reader: {
                        type: 'json',
                        root: 'data',
                        metaProperty: 'metadata',
                        totalProperty: 'metadata.totalCount',
                        successProperty: 'metadata.success',
                        messageProperty: 'metadata.msg'
                    },
                }
            });

            //define tree panel
            Ext.define('MyTreePanel', {
                extend: 'Ext.tree.Panel',
                alias: 'widget.myTreePanel',

                store: 'MyStore',

                rootVisible: false,
                columns: [
                    {
                        xtype: 'treecolumn',
                        dataIndex: 'nodename',
                        sortable: false,
                        flex: 2,
                        header: ''
                    },
                    {
                        xtype: 'checkcolumn',
                        dataIndex: 'isvisible',
                        sortable: false,
                        width: 55,
                        header: 'Visible'
                    }
                ]
            });


            //create tree view
            var storeInstance = Ext.create('MyStore');
            Ext.createWidget('window', {
                title: 'test',
                layout: 'fit',
                autoShow: true,
                height: 360,
                width: 200,
                items: {
                    xtype: 'myTreePanel',
                    store: storeInstance,
                    border: false
                }
            });

            //load            
            storeInstance.load({
                scope: storeInstance,
                callback: function (records, operation, success) {

                    try {
                    }
                    catch (ex) {
                        Ext.Msg.alert("", "callback error: " + ex);
                    }
                }
            });

        }
        catch (ex)
        {
            Ext.Msg.alert("", ex)
        }
    });



</script>
</body>
</html>

Any idea about what's wrong?...

Upvotes: 1

Views: 455

Answers (2)

Saki
Saki

Reputation: 5856

You can see the simples possible tree configuration here: http://extjs.eu/ext-examples/#tree-simplest

Upvotes: 0

Dev
Dev

Reputation: 3932

Your json over here is wrong.Root mentioned in the store is "data".So your json should be something like this:

{
  "data": [{
    "nodename": "child1",
    "data": [{
        "nodename": "subChild1",
        "expanded": false,
        "leaf": true
    }, {
        "nodename": "subChild2",
        "expanded": false,
        "leaf": true
    }]
 }],
  "metadata": {
    "success": true,
    "msg": "",
    "totalCount": 1,
    "totalPages": 1,
    "prevLink": "",
    "nextLink": ""
  }
}

For the tree to read nested data, the Ext.data.reader.Reader must be configured with a root property, so the reader can find nested data for each node (if a root is not specified, it will default to 'children'). This will tell the tree to look for any nested tree nodes by the same keyword, i.e., 'children'. If a root is specified in the config make sure that any nested nodes with children have the same name. Note that setting defaultRootProperty accomplishes the same thing.

Upvotes: 1

Related Questions