ExtJs 树面板，来自 Json API 的树存储

Question

我正在尝试在 ExtJS 中制作树表示。我有一个服务 return 这个 Json 文件。

你能帮我构建模型、存储和视图来构建树吗？提前致谢。

Answer 1

首先，您必须将 JSON 修改为可以接受树的结构。在您的 JSON 中，每个对象都有属性 id。此 ID 属性必须是唯一的，在您的情况下，您有组 id:1 和设备 id:1。必须在数据修改时更改。

这里我们正在创建模型并递归地修改 JSON 以获得所需的数据结构。

NOTE mType 属性将为节点定义模型。 see fiddle, also documentation for treepanel

Ext.define('Root', {
    extend: 'Ext.data.TreeModel',
    childType: 'Group',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});
Ext.define('Group', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});
Ext.define('Device', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'text',
        mapping: 'name'
    }]
});

var normilizeData = function (json) {
    var node = {};
    Ext.Object.each(json, function (k, v) {
        if(v.id){
         v.id = k+":"+v.id;
        }

        if (k == 'group') {
            Ext.apply(node, v);
            node.mType = 'Group';
        } else if (k == 'children') {
            if (v.length) {
                node.children = [];
                Ext.each(v, function (a) {
                    node.children.push(normilizeData(a));
                })
            } else {
                node.leaf = true;
            }
        } else if (k == 'device') {
            Ext.apply(node, v);
            node.mType = 'Device';
        } else {
            if (!node.children) {
                node.children = [];
            }
            node.children.push(normilizeData(v));
        }
    });
    return node;
}

ExtJs 树面板，来自 Json API 的树存储

ExtJs Tree Panel, Tree Store from Json API

extjs

treestore