Javascript 使用TreeStore和TreePanel更正JSON和模型

我有一个来自服务器端的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"}]}

---

我怎样才能把它变成一棵树？有谁能建议我如何获取列表中的元素（id、名称、父id、类型）？

让我们从商店定义开始：

Ext.define('app.store.Tasks', {

    extend: 'Ext.data.TreeStore',    
    model:  'app.model.Task',

    autoSync: true,
    autoLoad: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },
});

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

});

需要注意的重要一点是，我们正在这里扩展

TreeStore

。因此，我们的模型记录将用

Ext.data.NodeInterface

包装，其中包括许多与树相关的字段（例如，

parentNode

）

然后是模型定义：

Ext.define('app.store.Tasks', {

    extend: 'Ext.data.TreeStore',    
    model:  'app.model.Task',

    autoSync: true,
    autoLoad: true,

    root: {
        text: 'Root',
        id: 'NULL',
        expanded: true
    },
});

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

});

我们定义的唯一“真实”字段是

name

，其他所有字段都是

NodeInterface

的一部分：

iconCls

的默认值为no icon

expanded

设置为

persist:false

，因此折叠/扩展节点不会导致更新服务器调用<包含代码>索引，因此如果用户重新排序节点（使用拖放），将进行服务器调用

请注意，没有

id

字段，因为模型的默认

idProperty

是

id

，ExtJS非常聪明，可以认为如果JSON中有

id

字段，那么它表示记录的唯一id

还请注意，没有

parentId

字段-通过提供正确的JSON（节点具有

子节点

属性），

NodeInterface

计算出每个节点的正确

parentNode

然后JSON：

{
    "success":true,
    "children":[
     {
        "id":"1",
        "name":"Home",
        "children":[
           {
              "id":"6",
              "name":"Emails",
              "leaf":true
           },
           {
              "id":"7",
              "name":"Bath",
              "leaf":true
           }
        ],
        "leaf":false
     },         
    ]
}

---

差不多就是这样

我使用了以下结构：

型号

Ext.define('MyApp.model.MyTreeModel', {
    extend: 'Ext.data.Model',
    fields: [
         'someStringIdentifier',
         'children',
         'dataForThisNode',
    ],
});

商店

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

示例JSON（用于可视化）

使用叶属性停止在任何节点上的扩展

{"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}

---

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'},        
],

---

你能在你的例子中解释更多关于代理的api吗？我不知道这是为了方便远程服务器上的CRUD操作。您可能也感兴趣。我可以使用ajax代理类型本身，对吗？正如我在问题中给出的那样？当然。你可以在Ajax和Direct之间选择——任何最适合你的都可以。我已经改变了我的。。但我仍然得到了相同的错误

uncaughttypeerror:当访问子节点时，无法读取未定义的属性“internalId”

。。第一级节点也可见，但没有任何文本。。我遗漏了什么吗？没有bug。如果您设置了

autoLoad:false

，然后执行

expanded:true

，那么您将从树中获得加载。