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' }, ...