Paging in Ext JS Grid:

Here, you will learn how to implement server-side paging in a grid view in MVVM architecture. We are going to build Student List view that will look like below.

ExtJS grid paging example

We would need to create the following classes to build grid paging demo as shown above.

  1. Model
  2. ViewModel
  3. View

Also, implementing server side paging requires REST api or other web service that will handle HTTP request with page, start and limit parameters. We have created following Web API in .NET that handles HTTP GET request.

public class StudentWebAPI
{
    public StudentPage GetStudentPage(int page, int start, int limit)
    {

        StudentPage currentPage = new StudentPage();

        var student = GetDataFromDatabase(); // sample function which will get the data from db

        currentPage.Students = students.Skip((page - 1) * limit).Take(limit).ToList<Student>();

        currentPage.TotalCount = students.Count;

        return currentPage;
        
    } 
}

public class Student
{
    public int Id { get; set; }

    public string firstName { get; set; }
        
    public string middleName { get; set; }
        
    public string lastName { get; set; }
        
    public string birthDate { get; set; }
        
    public string address1 { get; set; }
        
    public string address2 { get; set; }
        
    public string city { get; set; }
        
    public string state { get; set; }
        
     
}
public class StudentPage
{
    public int TotalCount { get; set; }
        
    public IList<Student> Students { get; set; }
}

As you can see in the above example, GetStudentPage will handle HTTP GET request with page, start and limit params and returns a portion of records as per these params. It will send StudentPage class as a response which includes TotalCount and Students properties which will be used in configuring paging in Store in ViewModel.

Create Model:

First of all, let's create model class for Student. Create Student.js in app -> model folder and define Student class as shown below.

Ext.define('School.model.Student', {
    
    extend: 'Ext.data.Model',
    idProperty:'Id',
    schema: {
        namespace: 'School.model'
    },
    fields: [
        { name: 'Id', type: 'int', defaultValue: 0},
        { name: 'firstName', type: 'string' },
        { name: 'middleName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'birthDate', type: 'date' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' }
    ]

});

Create ViewModel:

After creating model class let's create ViewModel class. Create StudentViewModel.js in app -> view -> student folder and define StudentViewModel class as shown below.

Ext.define('School.view.student.StudentViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.studentviewmodel',
    stores: {
        StudentListPagingStore: {
            model: 'School.model.Student',
            autoLoad: true,
            pageSize: 5,
            proxy:
            {
                type: 'rest',
                url: '/api/student'
                reader:
                {
                    type: 'json',
                    rootProperty: 'Students',
                    totalProperty: 'TotalCount'
                }
            }
        }

    }
});

In the above ViewModel class, we have defined StudentListPagingStore in stores config. The StudentListPagingStore uses School.model.Student model which we created above. The autoLoad is set to true which will load data when view loads. The pageSize config specifies the size of records that will be displayed in a grid. The rootProperty specifies the name of the property in response JSON which includes data. The totalProperty specifies the name of the property in response JSON data that indicates the total number of records which is TotalCount in this case because our Web API returns response with this property.

Create View:

Now, let's create a grid view component using classic toolkit. Create StudentListPaging.js in classic -> src -> view -> student folder and define StudentListPaging grid view as shown below.

Ext.define('School.view.student.StudentListPaging', {
    extend: 'Ext.grid.Panel',
    xtype: 'studentListPaging',

    title: 'Student List - Paging Demo',

    viewModel: { type: 'studentviewmodel' },
    selType: 'rowmodel',
    selModel:
    {
        mode: 'SINGLE'
    },
    viewConfig:
    {
        stripeRows: true
    },
    listeners: {
        selectionchange: 'onSelectionChange'
    },
    bind: {
        store: '{StudentListPagingStore}'
    },
    initComponent: function () {
        Ext.apply(this,
        {
            columns: [{
                text: "Id",
                dataIndex: 'Id',
                width: 35
            },
            {
                text: "First Name",
                flex: 1,
                dataIndex: 'firstName'
            },
            {
                text: "Middle Name",
                flex: 1,
                dataIndex: 'middleName'
            },
            {
                text: "Last Name",
                flex: 1,
                dataIndex: 'lastName'
            },
            {
                xtype: 'datecolumn',
                header: "Birth Date",
                width: 135,
                dataIndex: 'birthDate',
                renderer: Ext.util.Format.dateRenderer('d/m/Y')
            },
            {
                text: "City",
                flex: 1,
                dataIndex: 'city'
            },
            {
                text: "State",
                flex: 1,
                dataIndex: 'state'
            }],
            bbar: [{
                xtype: 'pagingtoolbar',
                bind:{
                    store: '{StudentListPagingStore}'
                },
                displayInfo: true,
                displayMsg: 'Displaying {0} to {1} of {2} &nbsp;records ',
                emptyMsg: "No records to display&nbsp;"
            }]

        });

        this.callParent(arguments);
    }
});

In the above grid view, we have used pagingtoolbar in the bottom bar. This is the paging toolbar which display next, previous, first and last buttons with paging information. You can configure this as per your need. Visit Sencha docs for more information on Paging Toolbar

Thus you can implement server side paging in Ext JS Grid component. Click Live Example below to see the whole example code in MVVM folder structure.

Live Example