Learn how to Sort, Filter, and Group Data with JavaScript and the Ext JS Grid
A much-used term, Data Manipulation is the process of querying modifying data. It refers to the technique of adjusting data to make it more organized and easier to read. While many consider data manipulation difficult and complex, it does not need to be. With the Ext JS Grid, you can easily group, sort, and filter data using JavaScript. In this tutorial, you will find all the details. What is the Ext JS Grid? The “Grid” is one of the centerpieces of Sencha Ext JS. With it, you can easily fetch, sort, and filter a large amount of data. To make this possible, the Ext JS grid consists of two main components – an Ext Data Store full of data and a set of columns to render. How to Group Data with the Ext JS Grid Sorting Data in Multiple Columns Let’s say that you are building a flight booking web application. As a part of the app, you want your users to be able to sort multiple columns including Date, Airline, and Schedule, to help them find the best flights. Take a look at the illustration below: To implement the sort functionality to your web app using Ext JS, simply add the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’, multiColumnSort: true, store: { // Two property sort via store configuration sorters: [{ property: ‘airline’ }, { property: ‘destination’ }], type: ‘store’, autoLoad: true, fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}], proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} }, columns: [{ xtype: ‘datecolumn’, text: ‘Date’, dataIndex: ‘date’, format: ‘M j’, width: 60 }, { xtype: ‘column’, // This is the default column xtype text: ‘Airline’, dataIndex: ‘airline’ }, { text: ‘To’, dataIndex: ‘to’ }, { text: ‘Scheduled’, dataIndex: ‘plannedDeparture’, align: ‘center’ }, { text: ‘Status’, dataIndex: ‘realDeparture’, flex: 1 }], }); Ext.application({ name: ‘MyApp’, mainView: ‘MyApp.view.Main’ }); Once you understand the basics, you can experiment with the code using Sencha Fiddle. How can I sort Data in a Single Column? Now that you have the multiple column sort down pat, let’s look at another use case. Say that you want your users to find their flights by clicking the SORT ON DESTINATION text and sort the destination data into just a single column: To do it, you have to use the following code: Ext.define(‘MyApp.view.Main’, { extend: ‘Ext.grid.Grid’, title: ‘Reykjavik Flight Departures’, items: [{ docked: ‘top’, xtype: ‘toolbar’, items: [{ text: ‘Sort on destination’, handler: function(button){ // Sort under program control button.up(‘grid’).getStore().sort(‘to’); } }] }], store: { // Sort via store configuration sorters: [{ property: ‘airline’ }], type: ‘store’, autoLoad: true, fields: [{name: ‘date’,type: ‘date’,dateFormat: ‘j. M’}], proxy: {type: ‘ajax’,url: ‘departures.json’,reader: {rootProperty: ‘results’}} }, columns: [{ xtype: ‘datecolumn’, text: ‘Date’, dataIndex: ‘date’, format: ‘M j’, width: 60 }, { xtype: ‘column’, // This is the default column xtype text: ‘Airline’, dataIndex: ‘airline’ }, { text: ‘To’, dataIndex: ‘to’ }, { text: ‘Scheduled’, dataIndex: ‘plannedDeparture’, align: ‘center’ […]
