Scroll Top

How to use Ext.tree.Panel to view hierarchical data and their detail

Getting your Trinity Audio player ready...

Problem Statement

Whenever the hierarchical information is stored in the flat tables, the business often want to be able to see such data in a tree structure. In addition, the business are often interested in viewing the detail of the specific node in that tree. This is where tree grid panel is very useful.

This article explains how you can use ExtJS classes to achive the business goal of creating tree grid panel.

How to do this?

Before we proceed with the ExtJS specific detail, let’s have a look at the flat record detail which we may often get as part of reading a table consisting of hierarhical information.

Using the Node number and parent node information, we can derive the hierarchy and the leaf detail allows you to treat the last level node differently as compared to the branch node.

Now that you know the format of JSON response, you shall be able to define corresponding model and stores. For example I have got following definition for model

For the sake of simplicity, I have considered local json file for providing the complete data. The store definition looks like below:

Now that you have data, model and stores you are ready for using the model:

Now use this class to create a view consisting of hierarchical data being represented in grid format. The following code is using the above defined tree panel class to

The columns configuration allows you to specify the grid column details.

Well while these simple configurations will allow you to be able to see your data in grid format, the tree is not respecting the hierarchy defined using the parent node.

Now let’s review ‘mytreegrid’ grid definition and add a listener beforeitemappend. The beforeitemappend allows you to decide whether you want to allow append for a given node or not.

beforeitemappend : function(thisnode, newnode, eopts) {

You will have an output which resembles below screen and it does respect your hierarchy rules.

Summary

The purpose of this article was to show you how easily you can make use of Sencha APIs to be able to develop the user interface as per the business need. A close look at the article shows that all you need to know is awareness of MVC architecture and understanding of different events fired by the respective component. I hope you found this article helpful and it enables you to make use of tree panel to solve similar business problem. In case you need any professional support on Sencha products like ExtJS and Sencha Touch do visit our website and get in touch with us.

References

  1. http://docs.sencha.com/ext-js/4-0/#!/example/tree/treegrid.html
  2. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tree.Panel
  3. http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore

Leave a comment

Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.