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

Json for jqGrid from ASP.Net MVC

jqGrid takes a specific format for its json (taken from jqGrid documentation): [js]{ total: "xxx",page: "yyy", records: "zzz", rows : [ {id:"1", cell:["cell11", "cell12", "cell13"]}, {id:"2", cell:["cell21", "cell22", "cell23"]}, ... ]}[/js] The tags mean the following: total - Total number of Pages. page - Current page Index. records - Total number of records in the rows group. rows - An array with the data plus an identifier. id - The unique row identifier, needs to be an int from what I have found. cell - An array of the data for the grid. The ASP.Net MVC framework has the JsonResult response type which we can use to populate the jqGrid. As an example I created a Person model and a method to return some data: [csharp] public class Person { public int ID { get; set; } public string Name { get; set; } public DateTime Birthday { get; set; } } public I
3 comments
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

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