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.
We would need to create the following classes to build grid paging demo as shown above.
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.
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' } ] });
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.
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} records ', emptyMsg: "No records to display " }] }); 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