如何在Ext.js的tree view中创建子节点 代码不生效问题咨询

问题根因排查 #

你当前的实现存在两个核心错误导致子节点不生效：

1. 你实例化的是普通Ext.Panel组件，该组件本身不支持树形结构的渲染逻辑，也不识别children配置项
2. ExtJS树形结构的节点数据必须通过Ext.data.TreeStore进行管理，不能直接写在Panel的根配置参数中

正确实现代码（适配ExtJS 4.x及以上版本） #

// 先创建树专用的Store，管理节点数据
var treeStore = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true, // 默认展开根节点，直接显示子节点
        children: [{
            text: "Leaf node (<i>no folder/arrow icon</i>)",
            title: 'dasdasd',
            leaf: true,
            id: 'myLoc',
            qtitle: 'Sample Tip Title',
            qtip: 'Tip body'
        }]
    }
});

// 实例化树组件，绑定上面创建的Store
var myLocations = new Ext.tree.Panel({
    title: 'my work',
    id: 'student',
    height: 100,
    autoScroll: true,
    iconCls: 'myPanel',
    store: treeStore,
    rootVisible: false // 可选配置：隐藏默认根节点，直接展示你定义的子节点
});

关键修正点说明 #

• 组件替换：将普通Ext.Panel替换为Ext.tree.Panel，这是ExtJS官方提供的树形结构专用组件，支持leaf节点标识、折叠展开、提示渲染等树相关特性
• 数据层适配：树形结构的所有节点都由Ext.data.TreeStore统一管理，你之前定义的children需要放到store的root配置下才会被识别
• 可选优化：如果不需要显示默认的根节点，配置rootVisible: false即可直接展示你定义的一级子节点

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