Book Image

Learning Ext JS_Fourth Edition

Book Image

Learning Ext JS_Fourth Edition

Overview of this book

Table of Contents (22 chapters)
Learning Ext JS Fourth Edition
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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