Blog Archive

ExtJs 4 Tree Grid example with column headers, checkboxes and menu options using Java Servlet, JSON and MySQL

As you already know a Tree Layout has so many advantages providing the user with the easy to understand visual representation of a hierarchical database model. The most common use of this is found when drilling down thru categories in an eCommerce site. The structure allows representing information using parent/child relationships: each parent can have many children, but each child has only one parent (also known as a 1-to-many relationship). This tutorial will cover some advance topics related to a Tree representation. For a beginner tutorial on Tree panel please visit the link below ...

ExtJs 4 Tree Panel sample code - Java Servlet, JSON and MySQL



ExtJs 4 Tree Grid with checkboxes and menu options using Java Servlet, JSON and MySQL

This Tree Panel tutorial covers the following topics
  • ExtJs 4 Tree Panel with multiple headers/columns, basically a Grid view of a Tree panel
  • Loading childen with a AJAX request based on Node click
  • Using keyboard Arrow navigation
  • Using custom iconCls
  • Use of singleExpand to only keep one node open at a time
  • Allow multiselect
  • Checkbox selection with Select and unselect all child nodes
  • Display menu options on Item context(Right) click to allow Add, Update and Delete of a node
  • Java Object representation of a Tree Node
  • Java Servlet to process all requests and provide JSON reponses
  • MySQL database on the Back-end proving Tree data

This Tree example will drill down from Continents to Regions and then to Countries and display various other information in a Grid View. Also you will be able to add, edit and delete a country using menu options on the Tree node.



ExtJs 4 Tree Grid with checkboxes and menu options using Java Servlet, JSON and MySQL
ExtJs 4 Tree Grid with checkboxes and menu options using Java Servlet, JSON and MySQL

Lets start the application with the HTML index file - index.html

In here we have created three custom classes that we will use as menu icons for adding, editing and deleting a country from the Tree.
<html>
<head>
    <title>ExtJs 4 Multi column Tree Panel Example using Java Servlet and MySQL database</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
   
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
   
    <style type="text/css">
        .icon-add {
            background-image: url(images/add.png) !important;
        }
        .icon-edit {
            background-image: url(images/edit.png) !important;
        }
        .icon-delete {
            background-image: url(images/delete.png) !important;
        }
    </style>

</head>
<body>
</body>
</html>

Next up is the application Javascript file - app.js

The application file creates a Viewport and puts the Tree Panel inside that. It defines the app folder, the application name and the controller. In addition to that we have created an application variable currentRecord that we will use to store the selected Node on a Right Click.
Ext.Loader.setConfig({ 
    enabled: true 
    });


Ext.application({
   
    name: 'MYTREE',
    currentRecord: {},
    appFolder: 'app',
   
    controllers: [
                  'Countries'
              ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            items: [
                {
                    xtype: 'countryTree',
                }
            ]
        });
    }
});

To create a Grid view of the Tree with column headers we must define the model to be referenced by the Tree Store - Country.js

Here you will see two functions to format the decimals. In the case of a continent or a region node we are formatting the life Expentancy and GNP columns to blanks based on capital value. You can also send another field from the server to help you with that.
function formatDecimals(v, record){
    if(record.get('capital') == ""){
        return "";
    }
    else{
        return (new Number(v)).toFixed(2);
    }
}

function formatDecimals2(v, record){
        return (new Number(v)).toFixed(2);
}

Ext.define('MYTREE.model.Country', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'id',     type: 'string'},
            {name: 'text',     type: 'string'},
            {name: 'surfaceArea', convert: formatDecimals2},
            {name: 'population', convert: formatDecimals2},
            {name: 'lifeExpectancy', convert: formatDecimals},
            {name: 'gnp', convert: formatDecimals},
            {name: 'capital', type: 'string'},
            {name: 'code', type: 'string'}
        ]
    });

Tree store definition that will load and store the Tree Nodes based on the Model and talk to your back-end server Java Servlet using AJAX request and JSON response - Countries.js

Ext.define('MYTREE.store.Countries', {
    extend: 'Ext.data.TreeStore',
    model: 'MYTREE.model.Country',
    proxy: {
        type: 'ajax',
        url: 'CountryServlet'
    },
    root: {
        text: 'Tree display of Countries',
        id: 'myTree',
        expanded: true
    },
    folderSort: true,
    sorters: [{
        property: 'text',
        direction: 'ASC'
    }],

    listeners: {
        load: function (tree, node, records) {
            console.log('After loading a node: ' + node);
            if(node.get('checked')){
                node.eachChild(function (childNode){
                    childNode.set('checked',true);
                });
            }
        }
    }

});

Click here for next Chapter