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


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.
{
'Node_Nr': '2', // Node Number
'Node_Level': '1', // Node Level (optional)
'Node_Parent': '0', // Parent Node Number (0 value indicates that this is already a 1st level node)
'BDO_Nr': '0', // A node whose value helps in deriving whether the node is a leaf node or not
'Registraton_Date: '01.01.2011', // Some data
'Text': '2. Beginning', // Node Name
}

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
Ext.define('APP.model.MyTreeModel', {
extend: 'Ext.data.Model',
fields: [
'Node_Nr',
'Node_Level',
'Node_Parent',
'BDO_Nr',
'Registration_Date',
'Text'
]
});

For the sake of simplicity, I have considered local json file for providing the complete data. The store definition looks like below:
Ext.define('APP.store.FDDViews', {
extend : 'Ext.data.TreeStore',
model : 'APP.model.MyTreeModel',
requires : [ 'APP.model.MyTreeModel' ],
storeId : 'MyTreeStore',
autoLoad : true,
proxy : {

type : ‘ajax’,
url : ‘app/data/MyTreeData_View.json’
},
reader : {
type : ‘json’
}
});

Now that you have data, model and stores you are ready for using the model:
Ext.define('APP.view.components.TreeGridPanel', {
extend : 'Ext.tree.Panel',

requires : [ ‘APP.store.TreeStore’ ],
alias : ‘widget.mytreegrid’,
rootVisible : false,
useArrows : true,
height : 500,
pageSize : 20
});

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
{
xtype : 'mytreegrid',
flex : 1,
store : this.treestore,

columns : [ {
xtype : ‘treecolumn’,
header : ‘Text’,
dataIndex : ‘Text’,
flex : 3
}, {
header : ‘Registration Date’,
dataIndex : ‘Registration_Date’,
width : 40
}

]
}

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) {

if (thisnode == null || Ext.isEmpty(thisnode.data[‘Node_Nr’])
&& newnode.get(‘Node_Parent’) == 0) {

return true;
}

if ( thisnode ) {
var parent = thisnode.data[‘Node_Nr’];
var newNodeParent = newnode.get(‘Node_Parent’);
var leaf1 = thisnode.data[‘BDO_Nr’];

if ( parent == newNodeParent && leaf1 == 0 ) {
return true;
} else {
if (leaf1 != 0 ) {
thisnode.data.leaf = true; // non-zero value of BDO_Nr is an indication that the node is a leaf node.
}

return false;
}
} else {
return false;
}

}

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
Tagged with: , , ,
Posted in Sencha ExtJS
4 comments on “How to use Ext.tree.Panel to view hierarchical data and their detail
  1. Walking Tree says:

    You may also like to read following article to understand tree panel

    http://www.packtpub.com/article/ext-js-4-working-tree-form-components

  2. wtc says:

    The requirement is When we enter a value in textbox and click the lookup button the view should send the text value to the controller. The controller should apply filter on the tree store and reload the filtered tree in the tree grid panel.

    • Walking Tree says:

      The existing ExtJS version has dummy implementation for filter logic. Hence if at all you have to use filter APIs then you may need to override the same in an extended class.

  3. Walking Tree says:

    One of the common need is to provide a custom context menu on the right click on a tree node. It is again easy to achieve that using the example given above.

    var itemMenuContext = Ext.create( Ext.menu.Menu, {
    items: [{
    ----- Your Items -------------
    }
    ]
    });

    Pass this item as a custom configuration wherever you have instantiated the treepanel (or its subclass).

    Define following handler for the treepanel (or its subclass):

    itemcontextmenu : function ( thisItem, record, htmlItem, index, e, eOpts ) {
    var contextMenu = this.initialConfig.itemMenu;

    if ( !Ext.isEmpty(contextMenu) ) {
    e.stopEvent();
    contextMenu.showAt( e.getXY());
    }

    return false;
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: