Latest Ext JS 7.8 is now available. Learn more

Modernize Your JavaScript Grids With Sorting, Grouping, And Filtering

June 24, 2021 219 Views
Show

When it comes to displaying information there are few JavaScript components as important, or as useful as the Grid. It is one of the primary tools developers use to display, and, more importantly, allow users to view, sort, and interact with large data sets.

As a tool, JavaScript Grids allow developers to modernize and accelerate business processes by simplifying the way their users work with data. Grids allow us to render large sets of information without lagging or freezing. They also help considerably reduce the amount of time we spend managing our data.

In this article, we will show you how to improve your JavaScript Grid with sorting, grouping, and filtering using Sencha Ext JS. Now, let’s dive in.

What is Sencha Ext JS?

Sencha Ext JS is a powerful framework for developing cross-platform web and mobile applications. It supports over 150 UI elements, including grids, pivot grids, and D3 adapters. It helps you to develop data-intensive apps quickly and conveniently.

How can I Turbocharge my JavaScript Grids with Sorting?

One of the reasons the grids are so necessary is that they allow us to determine exactly how data is viewed. With Ext JS Grids, your options are almost unlimited — you can sort your data either by configuration or under program control. You also can perform both single-column and multi-column sorting.

Here is an example of single-column sorting:

Add Single Column Sorting with Ext JS

To create the sorting shown above, you have to follow these steps:

1. First, you have to specify the view of the app. Then extend Grid, and specify title and items.

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');

        }

    }]

}],

2. Next, you have to sort the data via configuration.

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'}}

},

3. Then you have to define the columns. For more information on how to do this check the source code.

4. Finally, add this code:

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Source Code:

You can play with the code on Fiddle.

Next, let’s look at multiple-column sorting. All you have to do to achieve this is add multiple sorters via configuration. Here is an example:

Sorting on multiple columns using the Ext JS Grid

Source Code:

You can find the source code right here.

How can I Turbocharge my JavaScript Grids with Grouping?

Grids have a grouped config that allows you to conveniently group columns. Here is an example of how to make it happen:

To create the grouping shown above, simply follow these steps:

1. Specify the view of the app and title. Also, extend the Grid.

Ext.define('MyApp.view.Main', {

    extend: 'Ext.grid.Grid',

    title: 'Reykjavik Flight Departures',

2. Set grouped to true.

grouped: true,

3. Now, you have to specify the columns. You can find everything on the source code.

4. Next, you have to define the store.

store: {

        type: 'store',

        autoLoad: true,

        fields: [{name: 'date',type: 'date',dateFormat: 'j. M'}],

        proxy: {type: 'ajax',url: 'departures.json',reader: {rootProperty: 'results'}}

    }

    });

5. Then add this code:

    Ext.application({

    name: 'MyApp',

    mainView: 'MyApp.view.Main'

    });

Source Code:

You can find the source code at Fiddle.

How can I Turbocharge my JavaScript Grids with Filtering?

With the grid filters plugin, you can filter data based on a given input. Here is an example:

Add filtering to your Ext JS grid

To create the filtering functionality shown above, you have to follow these steps:

1. First, specify the view of the app and title. Also, extend Grid.

2. Set gridfilters to true.

plugins: {

    gridfilters: true

},

3. Create a function for clearing the filters.

onClearFilters: function(){

    this.getStore().clearFilter();

},

4. Next, you have to add columns. You can find all the details in the source code.

5. Define store. Set autoLoad to true.

store: {

    type: 'store',

    autoLoad: true,

    fields: [{name: 'date',type: 'date',dateFormat: 'j. M'}],

    proxy: {type: 'ajax',url: 'departures.json',reader: {rootProperty: 'results'}}

}

 

});

6. Finally, add this code:

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Source Code:

You can play with the code right here.

Are you ready to get started modernizing your grids?

That’s how you modernize your JavaScript grids with Sorting, Grouping, and Filtering. We will cover more ways of turbocharging grids in the upcoming posts. So, do not forget to check our website regularly.

Sencha Ext JS is a feature-rich JavaScript library for building data-intensive web applications for all modern devices, including PCs, smartphones, and tablets. Try it now for free.

Recommended Articles

Decoding the Divide: Enterprise Software Development vs. Standard Software Development

There are two main ways to develop software. These two ways include enterprise software application development and standard software development. Here, enterprise applications development customizes…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

React Apps Development Using ReExt with Ext JS Components

The world is moving fast towards online businesses. Businesses are established online via social media, mobile apps, and websites. In other words, an online presence…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Ext JS Performance Optimization for Large-scale Applications

Are you facing issues with Ext JS applications’ performance as they scale up? Don’t worry! This blog covers the main topics for optimizing Ext JS…

View More