Using Sencha Architect to Create Grafted Tree

Clint Harris posted How To Use ExtJS 4 TreePanels with Both Static Data and Model Stores. He has a great explanation of how to “graft” branches onto an ExtJS TreeView. In his example he is creating an Admin tree form that gives him access to Settings and Users.

I recreated his project using Sencha Architect 2.

The trickiest part was getting the tree to load the data correctly. I used the onLaunch function of the controller to get access to the TreeStores in order to call the userStore.setRootNode() and then to append the userStore to the settingsTreeStore.

Notice how I am using this.getUserTreeStoreStore() and this.getSettingTreeStoreStore(). Yes, I had to use “StoreStore” because I named my stores UserTreeStore and SettingTreeStore, then the Controller tacks on the second “Store” when it creates the get function.

Ext.define('GraftedTreeApp.controller.TreePanelController', {  
      extend: 'Ext.app.Controller',  
      
      models: [  
            'UserModel'  
      ],  
      stores: [  
            'SettingTreeStore',  
            'UserTreeStore'  
      ],  
      
      onLaunch: function() {    
            var userStore = this.getUserTreeStoreStore();  
            userStore.setRootNode({  
            text: 'Users',  
            leaf: false,  
            expanded: false  
      });  
      
      // Graft our userTreeStore into the settingsTreeStore. Note that the call  
      // to .expand() is what triggers the userTreeStore to load its data.  
      var settingsTreeStore = this.getSettingTreeStoreStore();  
      settingsTreeStore.getRootNode().appendChild(userStore.getRootNode()).expand();  
      }  
  
});  
  

Pretty much everything else was setting properties in the Sencha Architect UI. The project files are here.

NOTE: There is a known bug in this solution, when you collapse and expand the User node it loads more User data, after which the User node cannot be collapsed.