Blog Archive

ExtJs PagingMemoryProxy example using JSON data from Java Servlet AJAX request

The following example is built on the ExtJs user extension Ext.ux.data.PagingMemoryProxy, Paging Memory Proxy which allows to use paging grid with in memory dataset. In the example below data is coming in the form of a JSON object from a Java Servlet using an AJAX request which is more practical that using local data. Also provided is a filter that will locally filter complete stored data not just the grid data which is just the page that it displays.

The example is based on the MVC architecture provided in ExtJs 4.



ExtJs PagingMemoryProxy Ajax JSON data from Java Servlet with Grid Filter
ExtJs PagingMemoryProxy Ajax JSON data from Java Servlet with Grid Filter

Step 1: Application starting point index.html

<html>
<head>
    <title>ExtJs PagingMemoryProxy Ajax JSON data from Java Servlet 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.setPath('Ext.ux', 'extjs/ux');

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

Ext.require([
             'Ext.data.*',
             'Ext.grid.*',
             'Ext.ux.data.PagingMemoryProxy'
         ]);


Ext.application({
    name: 'SAMPLE',

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

    launch: function() {
        console.log("Launching the application!");
        Ext.Ajax.request({
        loadMask: true,
        url: 'CountryServlet',
        scope: this,
        success: function(response, callOptions) {
            myData = Ext.decode(response.responseText);
            myTempData = Ext.decode(response.responseText);
            Ext.create('Ext.container.Viewport', {
                items: [
                    {
                        xtype: 'countrylist',
                    }
                ]
            });
        },
        failure: function(response, callOptions) {
           // Use the response
        }
    });
       
    }
});

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

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

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

var myData;
var myTempData;

Ext.define('SAMPLE.store.Countries', {
    extend: 'Ext.data.Store',
    model: 'SAMPLE.model.Country',
    pageSize: 10,
    listeners: {
        beforeload: function(store, operation, options){
            console.log("My Store data is loading!");
        }
    }
});

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

Ext.define('SAMPLE.view.CountryList' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.countrylist',
    title : 'List of Countries',
    store : 'Countries',
    loadMask: true,
    autoheight: true,
    width: 1000,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: 'Countries',  
        dock: 'bottom',
        displayInfo: true,
        items: [
                { 
                    xtype: 'tbseparator' 
                },
                {
                    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('SAMPLE.controller.Countries', {
            extend : 'Ext.app.Controller',

            stores : ['Countries'],
            models : ['Country'],
            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() {
                    console.log('The panel was rendered');
                    this.getCountriesStore().setProxy({
                        type: 'pagingmemory',
                        data: myTempData,
                        reader: {
                            type: 'json',
                            totalProperty: 'totalCount',
                            root: 'countries',
                            successProperty: 'success'
                        }
                    });
                this.getCountriesStore().load();
                },
               
                onTriggerKeyUp : function(t) {
                    console.log('You typed something!');
                   
                        var thisRegEx = new RegExp(t.getValue(), "i");
                        var grid = this.getMyGrid();
                        records = [];
                        Ext.each(myData.countries, function(record) {
                            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(record[grid.columns[i].dataIndex])) {
                                            if (!grid.filterHidden && grid.columns[i].isHidden()) {
                                                continue;
                                            } else {
                                                records.push(record);
                                                break;
                                            };
                                        };
                                    };
                                } else {
                                    if (thisRegEx.test(record[grid.columns[i].dataIndex])) {
                                        if (!grid.filterHidden && grid.columns[i].isHidden()) {
                                            continue;
                                        } else {
                                            records.push(record);
                                            break;
                                        };
                                    };
                                };
                            }  
                        });
                        myTempData.countries = records;
                        myTempData.totalCount = records.length;
                        this.getCountriesStore().load();
                },
               
                onTriggerClear : function() {
                    console.log('Trigger got reset!');
                    myTempData.countries = myData.countries;
                    myTempData.totalCount = myData.totalCount;
                    this.getCountriesStore().load();
                }
           
        });

ExtJs PagingMemoryProxy Ajax JSON data from Java Servlet with Grid Filter
Click here for the Java Servlet sample code used in this Tutorial


15 comments :

  1. Great tuto brot, this is the best example that I found of pagingtoolbar thanks for sharing it, your code is very nice, I hope it works for everyone, Best regards,
    Victor

    ReplyDelete
    Replies
    1. học viên mới cùng với khu học viên cũ chỉ cách nhau một đỉnh núi mà thôi, Nhạc Thành dưới sự sắp xếp của Hàn Nguyệt đã đi tới gian phòng của mình, sau đó Nhạc Thành liền luyện chế một số đan dược cho đồ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ệpHàn Nguyệt.

      Luyện chế đan dược thì Nhạc Thành biết, ở trong học viện đan dược mỗi học viên đều có một gian dược thất, Nhạc Thành đã đáp ứng viện trường đồng thời tu luyện Đấu khí hệ và đan dược hệ.

      Sau khi đến khu học viện một ngày, Nhạc Thành nhìn không gian xung quanh rồi đi tới đan dược hệ, trong đan dược hệ tất cả ánh mắt đều nhìn về phía hắn.

      Đan dược thất quả là không tệ, Nhạc Thành cũng thỏa mãn, mặc dù là phủ kín nhưng Nhạc Thành cũng không yên lòng, ở cửa ra vào bố trí một cấm chế.

      Lần này Nhạc Thành dự định với sự trợ giúp của Thác Ni Tư và Trần Bưu mà luyện chế một số đan dược, trước mắt cố gắng đột phá tới Tích Cốc Kỳ luyện chế vài viên Ngưng Thần đan.

      Về phần Tư Mã Yên Nhiên, Nhạc Thành cũng muốn luyện chế một số đan dược

      Delete
  2. i am very happy for this example. but having small question, in URL place if i give my rest service URL then will it work properly? and also can u share us full code because i am facing one error with Ext.ux.data.PagingMemoryProxy

    this is error
    Uncaught TypeError: Cannot set property 'PagingMemoryProxy' of undefined line number 28
    line no 28: Ext.data.PagingMemoryProxy = function(data) {

    ReplyDelete
  3. You defiine the store with a namespaced name SAmPLE.store.Countries:

    Ext.define('SAMPLE.store.Countries', { extend: 'Ext.data.Store',

    Then at the panel and the controller the model is bound to the last part of the name

    store : 'Countries',

    Ehy is this? Why you do not use exactly as 'SAMPLE.store.Countries'.


    The Ext JS docs at Sencha tells very little, as they definne "User" and use "User" to bind that store ..

    ReplyDelete
  4. Thank you very much of this fine example.

    I found it helpful to move to the first page by calling the moveFirst() method of paging toolbar before loading data into the store. I did that also at the beginning of the onTriggerKeyUp function. Otherwise it was possible that the grid panel was empty, if the user had moved to the end of the grid before filtering data or loading in new, smaller data.

    ReplyDelete
  5. Thanks for share this blog with us I have a great technique to open any blocked torrent sites and very easily just one click and you can open it very easily.
    Omelge UK proxy

    ReplyDelete
  6. Hi , could you please tell me that how can i filter hasMany relation data store in Grid ? Please reply i am stuck at this. Thanks

    ReplyDelete
  7. This is beautiful, thanks for sharing a little bit of your world!
    access Mp3lemon in UK

    ReplyDelete
  8. This was awesome...thank you, by the way, you can also use remoteFilter:true to search the entire store, that would remove the need to filter one data store against another.

    ReplyDelete
  9. 1. A proxy is a special kind of web server that serves as an intermediary between you and a website you are accessing. When you browse through a proxy, your browser only "talks" to the proxy server, which in turn talks to the website. Mp3skull UK proxy

    ReplyDelete
  10. Very well explained article. As a newbie in Extjs this tutorial truly helped me in getting the front end grid pagination working. Thank you.

    ReplyDelete
  11. Your work is very simple art of work its really a helpful.
    access New Album Releases in UK

    ReplyDelete
  12. GET http://localhost:8080/wow/extjs/ux/data/PagingMemoryProxy.js?_dc=1444715977778 Ext.apply.injectScriptElement @ ext-all-dev.js:9382Ext.apply.loadScriptFile @ ext-all-dev.js:9501Ext.apply.require @ ext-all-dev.js:9692(anonymous function) @ ext-all-dev.js:2979(anonymous function) @ formWithButton.js:7
    ext-all-dev.js:9771 Uncaught Error: [Ext.Loader] Failed loading 'extjs/ux/data/PagingMemoryProxy.js', please verify that the file exists

    Please help how to add Ext.ux.data library to run this example

    ReplyDelete
    Replies
    1. One need to include the "ux" package in app.json

      Delete
  13. Hi, can you help me for pagin and filter in c# (Controller.cs not .js)
    All codes are same but how can I convert Countries.JS to Countries.CS

    ReplyDelete