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

0 0

By Walking Tree Sencha ExtJS April 9, 2012

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
}

{

'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'
]
});

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:

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
});

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
}

]
}

{

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;
}

}

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

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

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

Problem Statement

How to do this?

Summary

References

Leave a comment Cancel reply