如何在 ext.js 中的树视图中创建子项

Question

我需要在树视图中创建一个子项，请帮助如何做。我已经试过了，但是没有用。

var myLocations = new Ext.Panel({
    title: 'my work',
    id: 'student',
    height: 100,
    autoScroll: true,
    iconCls: 'myPanel',
    //  ,autoLoad: { url: 'UserLocDetails.aspx?UserName=' + strUser } 
    
    children: [{
        text: "Leaf node (<i>no folder/arrow icon</i>)",
        title: 'dasdasd',
        leaf: true,
        id: 'myLoc',
        qtitle: 'Sample Tip Title',
        qtip: 'Tip body'
    }]

});

Answer 1

您需要创建一个 TreeStore 来存储树的数据，以及一些可以显示树的组件，例如 TreePanel。试试下面的代码，它适用于 Ext JS 7.3.0 Classic Material，但可以被其他版本采用：

Ext.define('myTreeStore', {
    extend: 'Ext.data.TreeStore',
    root: {
        expanded: true
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    },
    data: {
        children: [{
            text: 'Main 1',
            leaf: true
        }, {
            text: 'Main 2',
            children: [{
                text: 'Sub 21',
                leaf: true
            },{
                text: 'Sub 22',
                leaf: true
            }]
        }, {
            text: 'Main 3',
            leaf: true
        }]
    }
})

Ext.application({
    name: 'Fiddle',
    launch: function () {
        const treeStore = Ext.create('myTreeStore');
        Ext.create('Ext.tree.Panel', {
            rootVisible: false,
            renderTo: Ext.getBody(),
            title: 'Tree Example',
            width: 400,
            store: treeStore,
        });
    }
});

如何在 ext.js 中的树视图中创建子项

how to create a child in a tree view in ext.js

extjs