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.
No comments:
Post a Comment