Programmers Sample Guide: 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.

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

Programmers Sample Guide

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

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

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

Next up is the application Javascript file - app.js

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

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

No comments:

Post a Comment