javascript 使用 TreeStore 和 TreePanel 更正 JSON 和模型
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11763648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Correct JSON and Model with TreeStore and TreePanel
提问by user1567829
I have a JSON String comes from the server side:
我有一个来自服务器端的 JSON 字符串：
{"success":"true","total":"6","list":
[{"id":"1","name":"folder1","parentid":"null","type":"0"},
{"id":"2","name":"r1","parentid":"1","type":"1"},
{"id":"3","name":"folder2","parentid":"1","type":"0"},
{"id":"4","name":"r2","parentid":"3","type":"1"},
{"id":"5","name":"r3","parentid":"null","type":"1"},
{"id":"6","name":"folder3","parentid":"null","type":"0"}]}
How do I turn that into a tree? Can anyone suggest me how to get the elements in the list (id, name, parentid, type)?
我怎么把它变成一棵树？谁能建议我如何获取列表中的元素（id、name、parentid、type）？
回答by sunny
I used the following structure:
我使用了以下结构：
Model
模型
Ext.define('MyApp.model.MyTreeModel', {
extend: 'Ext.data.Model',
fields: [
'someStringIdentifier',
'children',
'dataForThisNode',
],
});
Store
店铺
Ext.define('MyApp.store.MyTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'MyApp.model.MyTreeModel',
storeId: 'cubeDynamicStoreId',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
read : '/myapp/rest/myquery',
},
reader: {
type: 'json',
root: 'children',
successProperty: 'success',
idProperty: 'id',
},
},
// bug in extjs4.1 autoLoad is ignored
// specifying "loaded: true" resolves the problem
root: {
expanded: true,
loaded: true,
},
});
Sample JSON ( use http://jsonviewer.stack.hu/to visualize)
JSON 示例（使用http://jsonviewer.stack.hu/进行可视化）
Use the leaf property to stop expansion at any node
使用叶子属性在任何节点停止扩展
{"children":{"leaf":false,"someStringIdentifier":"Total","dataForThisNode":{},"children":[{"leaf":true,"someStringIdentifier":"data1","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]},{"leaf":true,"someStringIdentifier":"data2","dataForThisNode":{},"children":[{"leaf":false,"someStringIdentifier":"2012","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2013","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2014","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2015","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2016","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2017","dataForThisNode":{},"children":null},{"leaf":false,"someStringIdentifier":"2018","dataForThisNode":{},"children":null}]}]},"success":true}
回答by Izhaki
Let's start with the store definition:
让我们从商店定义开始：
Ext.define('app.store.Tasks', {
extend: 'Ext.data.TreeStore',
model: 'app.model.Task',
autoSync: true,
autoLoad: true,
root: {
text: 'Root',
id: 'NULL',
expanded: true
},
});
The important thing to note is that we are extending TreeStorehere. Thus, our model records will be wrapped with Ext.data.NodeInterface, which included many tree-related fields (like, for example, parentNode).
需要注意的重要一点是我们在TreeStore这里进行了扩展。因此，我们的模型记录将用 包裹Ext.data.NodeInterface，其中包括许多与树相关的字段（例如，parentNode）。
Then to the model definition:
然后是模型定义：
Ext.define('app.model.Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'name' , type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'},
],
proxy: {
type: 'direct',
api: {
create: Tasks.Create,
read: Tasks.Read,
update: Tasks.Update,
destroy: Tasks.Destroy,
},
},
});
The only 'real' field we've defined is name, All the others are part of NodeInterface: iconClshas a default value of no icon; expandedis set with persist:falseso collapsing/expanding a node won't result in an update server call; indexis included so if the user re-order nodes (using drag and drop) server calls will be made.
我们定义的唯一“真实”字段是name, 所有其他字段都是NodeInterface:iconCls的默认值无图标；expanded设置为persist:false折叠/展开节点不会导致更新服务器调用；index包含在内，因此如果用户重新排序节点（使用拖放）将进行服务器调用。
Notice that there's no idfield since a a model's default idPropertyis id, ExtJS is smart enough to figure that if your JSON has idfield in it - it represents the unique id of the record.
请注意，id由于 aa 模型的默认idProperty值为id，因此没有字段，ExtJS 足够聪明，可以确定您的 JSON 中是否有id字段 - 它代表记录的唯一 id。
Also note there's no parentIdfield - by providing correct JSON (with nodes having childrenproperty), NodeInterfacework out the correct parentNodeof each node.
另请注意，没有parentId字段 - 通过提供正确的 JSON（节点具有children属性），计算NodeInterface出parentNode每个节点的正确性。
Then the JSON:
然后是 JSON：
{
"success":true,
"children":[
{
"id":"1",
"name":"Home",
"children":[
{
"id":"6",
"name":"Emails",
"leaf":true
},
{
"id":"7",
"name":"Bath",
"leaf":true
}
],
"leaf":false
},
]
}
That's pretty much it!
差不多就是这样！
回答by extjs newbie
The first answer on this subject from Izhaki is great, but it seems misleading and will not work as is if your expectation is to see the description for nodes. I spent several hours struggling with this. The only way to see this description is to rename "name" with "text". see below.
Izhaki 关于这个主题的第一个答案很好，但它似乎具有误导性，并且不会像您期望看到节点的描述那样工作。我花了几个小时努力解决这个问题。查看此描述的唯一方法是将“名称”重命名为“文本”。见下文。
Ext.define('app.model.Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'text' , type: 'string'},
{name: 'iconCls' , type: 'string', defaultValue: 'treenode-no-icon'},
{name: 'expanded' , type: 'boolean', defaultValue: true, persist: false},
{name: 'index' , type: 'int'},
],
