ExtJS Treepanel 不显示子级

Posted 2023-02-26

【中文标题】ExtJS Treepanel 不显示子级

【英文标题】：ExtJS Treepanel does not show children

【发布时间】：2017-09-19 16:16:50

【问题描述】：

我打电话给store.load()，但树形面板只显示第一级（模型 ProcessVedDoc）。如果我向 load 方法添加回调，我会在记录中看到空的 childNode。虽然数据中有孩子（但对象没有映射到模型 VedDoc）。有什么问题？ screenshot from firefox dev tools

型号

Ext.define('Proj.model.ProcessVedDoc', 
extend: 'Ext.data.Model',
fields: [
    name: "text", mapping: 'name',
    name: "expanded", type: "boolean", defaultValue: true,
    name: "loaded", type: "boolean", defaultValue: true
],
requires : ['Proj.model.VedDoc'],
hasMany: [
    model: 'Proj.model.VedDoc',
    associationKey : 'children',
    name: 'children'
]);

Ext.define('Proj.model.VedDoc', 
extend: 'Ext.data.Model',
fields: ['id', 
  name: 'text', mapping: 'name', 
  name: 'leaf', type: 'boolean', defaultValue: true, persist: false],
idProperty: 'id');

商店

Ext.define('Proj.store.VedDocsTreeStore', 
extend: 'Ext.data.TreeStore',
model: 'Proj.model.ProcessVedDoc',
autoLoad: false,
autoSync: false,
root: 
    expanded: true
,
proxy: 
    type: 'ajax',
    url: 'portfolios/veddocs',
    getParams: Ext.emptyFn,
    timeout: 300000,
    reader: type: 'json', root: 'docs'
);

查看

    
        xtype: 'treepanel',
        title: 'Documents',
        name: 'vedDocs',
        margin: '15 0 0 0',
        width: 650,
        height: 350,
        rootVisible: false,
        store: vdocs
    

json

"docs": [
    "name": "15a1dc1515aa151eea556",
    "children": [
        "name": "Doc1", "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f",
        "name": "Doc2", "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5",
        "name": "Doc3, "id": "49a045cf-b5cf-4478-b886-f078e6a48753"]
,

    "name": "15a1dc18515bb515aa151556",
    "children": [
        "name": "Doc1", "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767",
        "name": "Doc2", "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"]
],
"success": true

【问题讨论】：

我认为您错过了 leaf 属性。请参考ExtJs tree docs

感谢您的回答。该字段位于模型 ExtJs (VedDoc) 中。我改变了json。添加了“叶子”并重命名了“名称”->“文本”。问题依然存在。 "text":"Doc1","id":"7813eb3c-57f9-4f39-aefc-af4860441189","leaf":true

【参考方案1】：

尝试以该格式做出响应，因为 treepanel 根理解子对象。

JSON 格式

    "success": true,
    "children": [
        "text": "15a1dc1515aa151eea556",
        "expanded": true,
        "children": [
            "text": "Doc1",
            "leaf": true,
            "id": "bf4e2776-1089-445f-98dd-e5e8fe5c798f"
        , 
            "text": "Doc2",
            "leaf": true,
            "id": "1312bba6-9d05-4aa5-b069-b2958043c2a5"
        , 
            "text": "Doc3",
            "leaf": true,
            "id": "49a045cf-b5cf-4478-b886-f078e6a48753"
        ]
    , 
        "text": "15a1dc18515bb515aa151556",
        "expanded": true,
        "children": [
            "text": "Doc1",
            "leaf": true,
            "id": "3cef1250-fd35-4ff6-bbbf-33e4c59d4767"
        , 
            "text": "Doc2",
            "leaf": true,
            "id": "a43ffa24-ed25-4fc7-80a5-f4b1a78b666e"
        ]
    ]

ExtJs Treepanel 和存储代码

我创建了一个演示。你在这里查看Sencha Fiddle

var store = Ext.create('Ext.data.TreeStore', 
    autoLoad: true,
    autoSync: false,
    root: 
        expanded: true
    ,
    proxy: 
        type: 'ajax',
        url: 'veddocs.json',
        timeout: 300000,
        reader: 
            type: 'json',
            root: 'children'
        
    
);

Ext.create('Ext.tree.Panel', 
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,
    renderTo: Ext.getBody()
);

注意*您可以在前端制作树形数据格式并使用 setRoot(your root object) 将数据加载到存储中。更多详情Extjs Store Docs

【讨论】：

非常感谢。这是工作。问题出在错误的一级子级名称中。

【参考方案2】：

您需要从Ext.data.TreeModel 扩展您的模型以在商店中构建一棵树。