by SiZZLE FiNGER
April 15. 2011 11:37 A.D.
If you have worked with the TreePanel, you know that you need to use the TreeLoader to actually load some data into the tree. But my needs on a recent project required a more 'abstract' approach, so I used a JsonStore. Here's why...
The Situation
I know, I know - I have read the responses all over the Sencha forum regarding the TreePanel/TreeLoader combo - "Don't Use a Store!". Well, the project I worked on required some specific behaviors that I was only able to pull off by using the JsonStore as the data provider for the TeePanel. Here is a punch list of my requirements:
- Display a tree as a 'summary' style like an email folder tree with item counts
- Refresh the tree every x seconds
- The complete data set is always returned - all parents/children
- Always display the tree 'expanded'
- Get data from a different URi
Example
Open in New Window / View Source
So if you look at the two examples above, you will notice right away that the Tree using the TreeLoader has a noticeable 'flash'. This is one behavior that I wanted to eliminate. Another issue I faced was cross-site scripting. I needed to access the tree's data source at a different URi. And finally, the control that you have over the JsonStore is just superior in many ways to the TreeLoader.
The key to loading the data from the JsonStore is found in this code snippit below. But you will want to view the entire source to see what is really going on.
// Load store and update tree
treeJSStore.load({
callback: function(r,options,success)
{
var newNode = new Ext.tree.AsyncTreeNode({
rootVisible: true,
children: [treeJSStore.getAt(0).json]
});
treeJS.setRootNode(newNode);
}
});
Conclusion
So while I was able to accomplish what I needed using the JsonStore, this approach isn't for everyone. For me, it makes the refreshing in my solution look good, there was minimal additional code, and using the JsonStore is consistent with how I load data for the other controls. I hope this helps you out, and if you have any suggestions or would like more information about this example, please leave a comment. Now go make your code sizzle!
Subscribe