TreeGrid：设置数据根没有效果答案

【问题标题】：TreeGrid: setting data root has no effectTreeGrid：设置数据根没有效果
【发布时间】：2012-02-23 10:30:09
【问题描述】：

我正在尝试设置 TreeGrid，我的数据对象如下所示：

{
    "code": "success",
    "data": {
        "text": ".",
        "children": [
            {
                "clientname": "Market",
                "contact": "OpenX Market Advertiser",
                "email": "asdasd@asdasd222.de",

我需要告诉 Ext 它应该使用 data 作为根元素：

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    proxy: {
        type: 'ajax',
        url: 'http://localhost/rocketads/trunk/advertisers/index/stats:true/',
        reader:{
            type:'json',
            root:'data'
        }
    },
});

这对我不起作用，尽管我已成功将其与普通商店一起使用。

【问题讨论】：

标签： extjs extjs4 extjs-mvc

【解决方案1】：

由于您已使用root: 'data' 设置您的阅读器，因此您必须在 json 中将 'children' 替换为 'data'：

{
    "code": "success",
    "data": {
        "text": ".",
        "data": [ // << not "children"
            {

【讨论】：

【解决方案2】：

你也可以这样用：

        reader: {
        type: 'json',
        // See http://stackoverflow.com/questions/9159627/extjs-loading-tree-from-json-file-using-mvc
        // http://stackoverflow.com/questions/6263380/extjs4-json-treestore
        root: function(o) {
            if (o.data) {
                return o.data;
            } else {
                return o.children;
            }
        }
    },

【讨论】：

【解决方案3】：

不幸的是，对于 TreeStore，您用于 root 的任何内容也用作每个后续级别的根，因此它可能会找到根节点，然后找不到它的 data 属性。要么将顶级属性从数据更改为子级，要么将每个子级实例更改为数据。

【讨论】：

【解决方案4】：

我在 ExtJS 4.2 中遇到了同样的问题我尝试通过以下代码解决此问题。

Ext.define('XZSoftware.view.sysconfig.permission.PermissionWindow', {
    extend: 'Ext.window.Window',
    itemid: "sysconfig-permission-window",
    vierConfig: { loadMask: true },
    layout:
    {
        type: "fit"
    },
    minWidth: 400,
    minHeight: 300,
    tree: null,
    treeStore: null,
    initComponent: function () {
        var me = this;
        Ext.log("initComponent()", me);

        me.treeStore = Ext.create("Ext.data.TreeStore", {
            proxy: {
                type: "ajax",
                actionMethods: { read: "POST" },
                reader: {
                    type: "json",
                    root: "data"
                },
                url: '/permissiontree_load.xzsoftware?o=AAAAACB'
            },
            root: {
                text: "Premission Tree",
                expanded: true
            }
        });

        me.tree = Ext.create("Ext.tree.Panel", {
            rootVisible: false,
            store: me.treeStore
        });

        me.items = [
            me.tree
        ];

        this.callParent(arguments);
    },

    Version: "1.0.0.0"

});

JSON 将从 HTTP 请求中得到响应。

{
    "total": 17,
    "data": [{
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "HSBC"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "All IDoc"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "ProCRM"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "Application Portal"
    }, {
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Order List"
        }, {
            "data": [{
                "data": [],
                "expanded": true,
                "leaf": "true",
                "checked": false,
                "text": "Report by monthly total"
            }],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Order Report"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Search"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "CNMOT - OMS"
    }, {
        "data": [{
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Company"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Funcation Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Menu Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Page Setting"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Permission"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Roles"
        }, {
            "data": [],
            "expanded": true,
            "leaf": "true",
            "checked": false,
            "text": "Users"
        }],
        "expanded": true,
        "leaf": "false",
        "checked": false,
        "text": "System Setting"
    }],
    "success": true,
    "message": "Success"
}

注意事项： 1.应该在TreeStore中设置root config。 2. JSON 中的 children 字段需要更改为 store 代理中的根配置。在我的示例“儿童”中设置为“数据”。

【讨论】：