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

Question

I need to create a child in a tree view how to do that kindly help. I have tried like this but it's not working.
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

You need to create a TreeStore in order to store data for a tree, and some component that can display a tree, for example a TreePanel. Try the following code, it is for Ext JS 7.3.0 Classic Material, but can be adopted to other versions:
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,
});
}
});