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

Question

我正在尝试在 ExtJS 中创建树表示。我有一个服务返回这个 Json 文件。

json文件

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

Answer 1

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

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

注意mType 属性将定义节点的模型。见 fiddle，还有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;
}