ExtJs树面板，Json API的树存储

Question

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

Json文件

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

Answer 1

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

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

注意mType属性，它将定义节点的模型。参见fiddle，另请参阅树面板的文档

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;
}