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.