The TreeStore

The TreeStore (Ext.data.TreeStore) is a special store in the Ext JS library. It is designed especially for working with the tree structure, which is Ext.tree.Panel in this case. As this class extends Ext.data.Store which in turn sequentially extends Ext.data.AbstractStore, you will notice that the behavior is similar to Ext.data.Store.

When we define our stores, we need to specify a data model. In this case (TreeStore), if we don't specify a model, then Ext JS will create an implicit data model using the Ext.data.NodeInterface class, which will lead to creating a model for our store.

Let's see an example of loading data from the server into our Ext.data.TreeStore class:

Ext.onReady(function(){
  Ext.tip.QuickTipManager.init();
  //Store Definition
  var MyTreeStore = Ext.create('Ext.data.TreeStore',{
    autoLoad: true,
    storeId:'myTreeStoreDS',
    proxy:{
      type: 'ajax',
      url: 'serverside/menu.json'
    }
  });
  var MyTreePanel = Ext.create('Ext.tree.Panel',{
 ...