如何在ExtJs树形视图（Tree View）中加载动态数据

你的API返回数据已经完全符合ExtJS树形组件的数据源要求（包含leaf标记层级、children数组存储子节点），直接通过TreeStore和TreePanel就能快速渲染出树形结构，步骤如下：

1. 定义TreeStore #

创建TreeStore，将API返回的数组作为数据源，配置rootVisible: false（因为你的顶级节点是多个根节点，无需显示默认根容器）：

const treeStore = Ext.create('Ext.data.TreeStore', {
    rootVisible: false,
    fields: [
        'Id', 'ParentId', 'Title', 'MapLayerGroupTypeId', 'leaf'
    ],
    // apiData为你从接口获取到的JSON数据
    data: apiData
});

2. 创建TreePanel渲染树形结构 #

用TreePanel关联上述Store，配置列展示节点内容，这里以显示Title和Id为例：

Ext.create('Ext.tree.Panel', {
    title: '层级数据树形展示',
    store: treeStore,
    renderTo: Ext.getBody(),
    width: 400,
    height: 500,
    columns: [{
        xtype: 'treecolumn', // 树形列自带展开/折叠按钮
        text: '标题',
        dataIndex: 'Title',
        flex: 1
    }, {
        text: 'ID',
        dataIndex: 'Id',
        width: 80
    }]
});

关键细节说明 #

• 数据中已明确标记leaf: true（叶子节点）和leaf: false（父节点），ExtJS会自动识别并处理展开/折叠逻辑，无需额外配置
• 叶子节点即使带有空children数组也不影响渲染，leaf属性优先级更高
• 若后续需要异步加载子节点（而非一次性返回全量数据），只需修改TreeStore的proxy配置指向API接口，并调整数据返回格式即可，当前全量返回场景用同步方案完全适配

内容的提问来源于stack exchange，提问作者Shokouh Dareshiri