Skip to main content

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.
Labels:

Comments

Post a Comment

Popular posts from this blog

FileSystemWatcher With the BlockingCollection

While working with the FileSystemWatcher I found that if too many files were created the built in buffer will overflowed and files will be skipped.  After much research I found out about the Producer-Consumer Problem .  Then I found that .Net 4 has the BlockingCollection which helps solve the issue.  But how to use it with the FileSystemWatcher? On StackOverflow I found  Making PLINQ and BlockingCollection work together .  I'm not so interested in the PLINQ issue but this is a great example of using The BlockingCollection with FileSystemWatcher. [csharp] using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading; namespace ConsoleApplication4 {     public class Program     {         private const string Folder = "C:\\Temp\\InputData";         static void Main(string[] args) {             var cts = new CancellationTokenSource();             foreach (var obj in Input(cts.Token))            
Post a Comment
Read more

C# Spirograph Point Generators

Spirograph's  are cool.  See here and here . I put together three ways to generate points for a Spirograph, first using a Brute Force straight generate the points, second using a Parallel.For and third using LINQ.
Post a Comment
Read more

Excel User Defined Functions with C# and ExcelDna

Adding user defined functions to Excel can be laborious, either you use VBA or COM. Why can't Microsoft make it easier to use Visual Studio and .NET within Excel? Enter ExcelDna . This example creates a static function in C# using Visual Studio. There is documentation that already describes this, what I am adding is: Use Visual Studio to create project Post Build Events to help create the final XLL file. NOTE: I hate Post Build Events. The ONLY exception is in this case where I am modifying the output of the final build. Post Build Events are Evil especially when used in a large development team. A better solutions is to create actual Build Scripts that do what I am about to do. You have been warned. First, create a new Class Library project. Use NuGet to add a reference to the Excel-DNA package. NuGet will also add ExcelDna.dna and ExcelDna.xll to your project. Rename them both to the name that you want your final output xll to be. In my case I renamed them to Scratch-ExcelDn
Post a Comment
Read more