In this example, we are going to display a simulation of a file directory using the Ext.tree.Panel component. So, our first step for creating a tree panel is to define our data using the Ext.data.TreeStore class. After this example, we will explore the Ext.data.TreeStore class deeper. Let's start with the following code:
var MyTreeStore = Ext.create('Ext.data.TreeStore',{
storeId: 'myTreeStoreDS',
root: {
text: 'My Application',
expanded: true,
children: [{
text: 'app',
children:[
{ leaf:true, text: 'Application.js' }
]
},{
text: 'controller',
expanded: true,
children: []
},{
text: 'model', expanded:true,
children: [
{ leaf:true, text: 'clients.js' },
{ leaf:true, text: 'providers.js'},
{ leaf:true, text: 'users.js' }
]
},{
text: 'store',
children: [
{ leaf:true, text: 'clients.js' },
{ leaf:true, text: 'providers.js' },
...