Blog Archive

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.


ExtJs Grid JSON Java Servlet example with Grid Filter using TriggerField
ExtJs Grid JSON Java Servlet example with Grid Filter using TriggerField

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


9 comments :

  1. phù trợ trợ giúp cho mình, dù gì nàng cũng là hôn thê của mình, cũng không thể để cho nàng ta có năng lực quá thấp.
    đồng tâm
    game mu
    cho thuê phòng trọ
    cho thuê phòng trọ
    nhac san cuc manh
    tư vấn pháp luật qua điện thoại
    văn phòng luật
    số điện thoại tư vấn luật
    dịch vụ thành lập doanh nghiệp
    Trong tay Nhạc Thành ngưng kết một thủ ấn, hai luồng Vô Thượng Chân Hỏa rót vào trong Vạn Thú Lô khiến cho nó đỏ bừng, ngay lập tức Nhạc Thành nhìn vào trong lò đan. Hiện tại Nhạc Thành đã luyện chế đan dược ngũ phẩm không còn khó khăn nữa, chỉ cần một chút thời gian là đủ mà thôi.

    Bởi vì lần này luyện chế đan dược hơi nhiều cho nên hắn cũng phải mất ba ngày, vì vậy chỉ còn cách lưu Khiếu Thiên hổ và Thác Ni Tư trong cấm chế.

    Khu học viện cũ ở trong Đấu Khí học viện vô cùng có danh khí, bởi vì khu học viện cũ học sinh năm mươi phần trăm đều có năng lực đấu vương, trong đó không thiếu cao thủ ngũ tinh lục tinh. Khu học viện cũ cũng tổng cộng có năm nghìn người, đấu vương tới hơn hai nghìn người, đây là một nơi có thực lực rất lớn, khó trách Cự Thành có thể đứng sừng sững ở bên ngoài hai đế quốc. Tổng cộng Đấu khí và ma pháp học viện cao thủ cộng lại cũng phải có ba nghìn đấu vương và ba nghìn ma pháp sư cấp năm, hai đại đế quốc cũng không dám chọc

    ReplyDelete
  2. Sure, it’s a good thing to enjoy your work, but there is such a thing as enjoying it too much.
    bejeweled

    ReplyDelete
  3. A child asked God: "If everything was written in fate so why should the convention?".
    Friv 2 | Unblocked | Yepi 2 | Unblocked Games | Xbox One Gamestop

    ReplyDelete
  4. Java script and his programming very good step by step thanks for share it java homework answers.

    ReplyDelete

  5. Very helpful advice in this particular post! It’s the little changes that make the largest changes. Thanks for sharing!
    minecraft 2 | baixar facebook | baixar whatsapp | facebook baixar | baixar photo grid

    ReplyDelete