Question

我在尝试加载一个非常简单的json时很困难，其中节点嵌套在内部＆＃34;数据＆＃34;如下所示。我希望得到两个带有文本AAA和BBB的节点，但我只得到一个带有几个空节点和无限子节点的树（每个子节点都有一个子子节点）。

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>

对于什么是错误的任何想法？...

Answer 1

你的json在这里是错的。商店里提到的根据是“数据”。所以你的json应该是这样的：

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

要使树读取嵌套数据，必须使用root属性配置Ext.data.reader.Reader，以便读者可以找到每个节点的嵌套数据（如果未指定root，则默认为'儿童）。这将告诉树通过相同的关键字查找任何嵌套的树节点，即“children”。 如果在配置中指定了根，请确保具有子项的任何嵌套节点具有相同的名称。请注意，设置defaultRootProperty可以完成同样的事情。

Answer 2

您可以在此处查看简单的树形配置：http://extjs.eu/ext-examples/#tree-simplest

Extjs，无法在treepanel中读取一个简单的json

2 个答案: