Programmers Sample Guide: ExtJs Grid JSON Java Servlet example with Grid Filter using TriggerField

Grids are an excellent way of showing large amounts of tabular data on the client side. GridPanel makes it easy to fetch, sort and filter large amounts of data. Grids are composed of two main pieces - a Store full of data and a set of columns to render. The example below makes request to the Java Servlet which in turn gets it data from MySQL database and send a JSON object back. The store parses the JSON object and the grid then displays them based on Object Model.

Step 1: Application starting point index.html

<html>
<head>
    <title>ExtJs Grid JSON Java Servlet example with Grid Filter </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>

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

Step 2: Application JavaScript file app.js

Ext.Loader.setConfig({ 
    enabled: true 
    });

Ext.application({
    name: 'CN',

    appFolder: 'app',
   
    controllers: [
                  'Countries'
              ],

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

Step 3: JavaScript source file for country model Country.js

Ext.define('CN.model.Country', {
    extend: 'Ext.data.Model',
    fields: [
             'code',
             'name',
             'continent',
             'region',
             'lifeExpectancy',
             'gnp'
             ]
});

Step 4: JavaScript source file for country store Countries.js

Ext.define('CN.store.Countries', {
    extend: 'Ext.data.Store',
    model: 'CN.model.Country',
    autoLoad: true,
   
    proxy: {
        type: 'ajax',
        url: 'CountryServlet',
        reader: {
            type: 'json',
            totalProperty: 'totalCount',
            root: 'countries',
            successProperty: 'success'
        },
     }
});

Step 5: JavaScript source file for country grid panel CountryList.js

Ext.define('CN.view.CountryList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.countrylist',
    title : 'List of Countries',
    store : 'Countries',
    loadMask: true,
    height: 400,
    width: 1000,
    omitColumns: ['lifeExpectancy','gnp'],
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        displayInfo: true,
        items: [{
                    xtype : 'trigger',
                    itemId : 'gridTrigger',
                    fieldLabel: 'Filter Grid Data',
                    triggerCls : 'x-form-clear-trigger',
                    emptyText : 'Start typing to filter grid',
                    size : 30,
                    minChars : 1,
                    enableKeyEvents : true,
                    onTriggerClick : function(){
                        this.reset();
                        this.fireEvent('triggerClear');
                    }
                }
        ]
    }],
    initComponent: function() {
       
        this.columns = [
            {header: 'Country Code', dataIndex: 'code',  flex: 1},
            {header: 'Name', dataIndex: 'name', flex: 1},
            {header: 'Continent', dataIndex: 'continent', flex: 1},
            {header: 'Region', dataIndex: 'region', flex: 1},
            {header: 'Life Expectancy', dataIndex: 'lifeExpectancy', flex: 1},
            {header: 'GNP', dataIndex: 'gnp', flex: 1}
        ];

        this.callParent(arguments);
    }
 
});

Step 6: JavaScript source file for the application controller Countries.js

Ext.define('CN.controller.Countries', {
            extend : 'Ext.app.Controller',

            //define the stores
            stores : ['Countries'],
            //define the models
            models : ['Country'],
            //define the views
            views : ['CountryList'],
            refs: [{
                ref: 'myGrid', 
                selector: 'grid'
            }], 
           
            init : function() {
                this.control({
                   
                    'viewport > panel' : {
                        render : this.onPanelRendered
                    },
                    'countrylist #gridTrigger' : {
                                keyup : this.onTriggerKeyUp,
                                triggerClear : this.onTriggerClear
                            }
                   
                });
            },

            onPanelRendered : function() {
                //just a console log to show when the panel si rendered
                console.log('The panel was rendered');
            },
           
            onTriggerKeyUp : function(t) {
                    console.log('You typed something!');
                   
                        var thisRegEx = new RegExp(t.getValue(), "i");
                        var store = this.getCountriesStore();
                        var grid = this.getMyGrid();
                        store.filterBy(function(rec) {
                            for (var i = 0; i < grid.columns.length; i++) {
                                // Do not search the fields that are passed in as omit columns
                                if (grid.omitColumns) {
                                    if (grid.omitColumns.indexOf(grid.columns[i].dataIndex) === -1) {
                                        if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
                                            if (!grid.filterHidden && grid.columns[i].isHidden()) {
                                                continue;
                                            } else {
                                                return true;
                                            };
                                        };
                                    };
                                } else {
                                    if (thisRegEx.test(rec.get(grid.columns[i].dataIndex))) {
                                        if (!grid.filterHidden && grid.columns[i].isHidden()) {
                                            continue;
                                        } else {
                                            return true;
                                        };
                                    };
                                };
                            }
                            return false;
                        });
                },
               
                onTriggerClear : function() {
                    console.log('Trigger got reset!');
                    var store = this.getCountriesStore();
                    store.clearFilter();
                }
           
    });

Click here for next Chapter

Programmers Sample Guide

ExtJs Grid JSON Java Servlet example with Grid Filter using TriggerField