Creating a tree in your user interface is achieved using a Tree Panel. This recipe gives you the knowledge required to create and configure a Tree Panel and load JSON data asynchronously from your server to the tree. The final tree will look like the following screenshot:
Make sure you have a web server installed and running on your development computer. For the purposes of this demonstration, your web server will need to serve JSON files. If your server is not capable, add a MIME type for JSON (application/json).
Start by defining an
Ext.data.TreeStore
to load our data into:var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'treeData.json' }, root: { text: 'Countries', expanded: true } });
The
treeData.json
file that we are loading from contains a simple array of data, some of these objects contain nested data that will form our tree structure. A sample...