Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Learn how to Sort, Filter, and Group Data with JavaScript and the Ext JS Grid

May 6, 2021 154 Views

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 do I 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:

Let’s Say That You Are Building A Flight Booking Web Application. You Want To Enable The Users To Sort Multiple Columns, Including Date, Airline, An

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:

Let’s Say That You Want The Users To Find Their Flights By Clicking On SORT ON DESTINATION And Sort The Destination Data In 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'

}, {

    text: 'Status',

    dataIndex: 'realDeparture',

    flex: 1

}],

 

});

 

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

As you can see, the trick here is adding an event handler to the SORT ON DESTINATION text in addition to adding the Date, Airline and To columns.

Here is the link to Sencha Fiddle so you can experiment some more.

How can I Filter Data with an Ext JS Grid?

Sorting Data under Program Control

Let’s say that you have a table for Pokemon where the users can sort the data by adjusting the numerical value of the HP column:

Let’s Say That You Have A Table For Pokemon

You can use the following code snippet to implement this functionality:

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

extend: 'Ext.grid.Grid',

title: 'Pokemon',

 

onHpChange: function(field, value) {

    var store = this.getStore();

    store.clearFilter();

    store.filterBy(function(r1) {

        return r1.data.hp >= value;

    });

},

 

items: [{

    xtype: 'toolbar',

    docked: 'top',

    items: [{

        xtype: 'spinnerfield',

        minValue: 30,

        maxValue: 100,

        stepValue: 10,

        value: 30,

        width: 80,

        labelWidth: 30,

        label: 'HP',

        listeners: {

            change: 'up.onHpChange'

        }

    }]

}],

plugins: {

    gridsummaryrow: true

},

store: {

    sorters: ['hp'],

    proxy: {

        type: 'ajax',

        url: 'inventory.json'

    },

    autoLoad: true

},

columns: [{

    text: 'Name',

    dataIndex: 'name',

    summary: 'count',

    summaryRenderer: function(grid, context) {

        return (context.records.length + ' Pokemon');

    }

}, {

    text: 'HP',

    dataIndex: 'hp'

}, {

    text: 'Attack',

    dataIndex: 'attack'

}, {

    cell: {

        encodeHtml: false,

        tpl: '<img src="https://docs.sencha.com/resources/json/pokemon/{pokedex}.png" height="24">',

    },

    text: 'Picture',

    dataIndex: 'pokedex',

    flex: 1

}]

});

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Please take a look at this portion of the code:

items: [{

        xtype: 'spinnerfield',

        minValue: 30,

        maxValue: 100,

        stepValue: 10,

        value: 30,

        width: 80,

        labelWidth: 30,

        label: 'HP',

        listeners: {

            change: 'up.onHpChange'

        }

In the example, you are specifying the different properties of the HP column, which includes minimum value, maximum value, and step value.

If you want to see more, you can play with the code at Sencha Fiddle.

Sorting Data Using Filter Binding

Another way you can implement the functionality shown in the previous section is by utilizing filter binding. To do this simply enter the following:

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

extend: 'Ext.app.ViewModel',

alias: 'viewmodel.main',

data: {

    value: 30

},

stores: {

    pokemon: {

 

        // This is pretty obscure. :-p

        filters: [{

            // This is a binding: it triggers running setFilters() * and * the property is available in filterFn.

            val: '{value}',

            id: 1, // A constant will reuse this filter rather than adding a new one

            filterFn: function(pokemon) {

                console.log(pokemon.data.hp);

                return (pokemon.data.hp >= this.val);

            }

        }],

 

        sorters: ['hp'],

        model: 'Ext.data.Model',

        proxy: {

            type: 'ajax',

            url: 'inventory.json'

        },

        autoLoad: true

    }

}

});

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

extend: 'Ext.Panel',

viewModel: {

    type: 'main'

},

title: 'Pokemon',

tbar: [{

    xtype: 'spinnerfield',

    minValue: 30,

    maxValue: 100,

    stepValue: 10,

    width: 110,

    labelWidth: 30,

    label: 'HP',

    bind: {

        value: '{value}'

    }

}],

layout: 'fit',

items: [{

    xtype: 'grid',

    bind: {

        store: '{pokemon}'

    },

    plugins: [{

        type: 'gridsummaryrow'

    }],

    columns: [{

        text: 'Name',

        dataIndex: 'name',

        summary: 'count',

        summaryRenderer: function(grid, context) {

            return (context.records.length + ' Pokemon');

        }

    }, {

        text: 'HP',

        dataIndex: 'hp'

    }, {

        text: 'Attack',

        dataIndex: 'attack'

    }, {

        cell: {

            encodeHtml: false,

            tpl: '<img src="https://docs.sencha.com/resources/json/pokemon/{pokedex}.png" height="24">',

        },

        text: 'Picture',

        dataIndex: 'pokedex',

        flex: 1

    }]

 

}]

});

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

If you are using this method, take note of the following:

        filters: [{

            // This is a binding: it triggers running setFilters() * and * the property is available in filterFn.

            val: '{value}',

            id: 1, // A constant will reuse this filter rather than adding a new one

            filterFn: function(pokemon) {

                console.log(pokemon.data.hp);

                return (pokemon.data.hp >= this.val);

            }

        }],

Here, you are binding the filters property to val: '{value}'. In this way, changing the specific property will automatically trigger the function of filterFn.

Download the source code at Sencha Fiddle.

How can I Group Data with a Javascript Ext JS Grid?

Group Data by a Specific Field

Now, let’s say that you want to let your users group flight data by a specific field, like Airline:

Let’s Say That You Want To Enable The Users To Group The Flight Data By A Specific Field, Like Airline

To implement this functionality, you to add this code to your web application:

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

    extend: 'Ext.grid.Grid',

    title: 'Reykjavik Flight Departures',

 

    grouped: true,

 

    columns: [{

        xtype: 'datecolumn',

        text: 'Date',

        dataIndex: 'date',

        format: 'M j, Y',

        width: 120

    }, {

        xtype: 'column', // This is the default column xtype

        text: 'Airline',

        dataIndex: 'airline',

        width: 200

    }, {

        text: 'To',

        dataIndex: 'to',

        width: 200

    }, {

        text: 'Scheduled',

        dataIndex: 'plannedDeparture',

        align: 'center'

    }, {

        text: 'Status',

        dataIndex: 'realDeparture',

        flex: 1

    }],

 

    store: {

        type: 'store',

        autoLoad: true,

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

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

    }

    });

    Ext.application({

    name: 'MyApp',

    mainView: 'MyApp.view.Main'

    });

IMPORTANT: Make sure that grouped is set to true.

To see it in action, here is the link to Sencha Fiddle.

Bonus: How can I Manipulate Data Using Plugins with Ext JS Grid?

With the Ext JS Grid Plugins, you can add amazing functionality that helps your users manipulate data easily and conveniently. As an example, we will discuss two plugins:

  • Row Operations
  • Row Drag and Drop

Row Operations

With the row operations plugin, you can set up an operation to be performed on a specific row. Here is an example of selecting and deleting rows with a single operation:

Here Is An Example Of Selecting And Deleting Rows With Just A Single Operation

To create this functionality with the Row Operations plugin, you have to add this code:

Ext.define('MyApp.view.main.MainController', {

extend: 'Ext.app.ViewController',

alias: 'controller.main',

onArchive: function() {

    var grid = this.getView();

    var records = grid.getSelections();

    var names = Ext.Array.pluck(Ext.Array.pluck(records, 'data'), 'name');

    Ext.Msg.alert('Archive', 'Archive ' + names.join(', ') + '?');

},

onDelete: function() {

    var grid = this.getView();

    var records = grid.getSelections();

    var names = Ext.Array.pluck(Ext.Array.pluck(records, 'data'), 'name');

    Ext.Msg.confirm('Delete', 'Delete ' + names.join(', ') + '?',

        function(buttonId) {

            if (buttonId === 'yes') {

                grid.getStore().remove(records);

            }

        });

}

});

 

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

extend: 'Ext.grid.Grid',

controller: 'main',

title: 'Pokemon',

 

plugins: {

    rowoperations: {

        // This config replaces the default "Delete" button provided by the plugin.

        operation: {

            text: 'Operations',

            ui: 'alt',

            menu: [{

                text: 'Archive',

                iconCls: 'x-fa fa-archive',

                handler: 'onArchive'

            }, {

                text: 'Delete',

                iconCls: 'x-fa fa-trash',

                handler: 'onDelete'

            }]

        }

    }

},

 

columns: [{

    text: 'Date',

    dataIndex: 'name'

}, {

    text: 'HP',

    dataIndex: 'hp',

}, {

    text: 'Defense',

    dataIndex: 'defense'

}, {

    text: 'Attack',

    dataIndex: 'attack',

    align: 'center'

}, {

    text: 'Speed',

    dataIndex: 'speed'

}],

store: {

    type: 'store',

    autoLoad: true,

    proxy: {

        type: 'ajax',

        url: 'inventory.json'

    }

}

});

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

Keep in mind that you are adding delete and archive functionality with this code:

operation: {

            text: 'Operations',

            ui: 'alt',

            menu: [{

                text: 'Archive',

                iconCls: 'x-fa fa-archive',

                handler: 'onArchive'

            }, {

                text: 'Delete',

                iconCls: 'x-fa fa-trash',

                handler: 'onDelete'

            }]

        }

Here is the link to the source code.

How can I Drag and Drop a row in JavaScript?

As the name suggests, the plugin allows you to drag and drop the rows of the table easily, just like this:

As The Name Suggests, The Plugin Allows You Drag And Drop The Rows Of The Table, Just Like This

To implement drag and drop functionality use the following:

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

extend: 'Ext.grid.Grid',

title: 'Pokemon',

plugins: {

    gridrowdragdrop: {}

},

columns: [{

    text: 'Date',

    dataIndex: 'name'

}, {

    text: 'HP',

    dataIndex: 'hp',

}, {

    text: 'Defense',

    dataIndex: 'defense'

}, {

    text: 'Attack',

    dataIndex: 'attack',

    align: 'center'

}, {

    text: 'Speed',

    dataIndex: 'speed'

}],

store: {

    type: 'store',

    autoLoad: true,

    proxy: {

        type: 'ajax',

        url: 'inventory.json'

    }

}

});

Ext.application({

name: 'MyApp',

mainView: 'MyApp.view.Main'

});

The following code adds row drag and drop functionality:

plugins: {

    gridrowdragdrop: {}

}

Wrapping Up

That’s it! You have learned some of the different ways you can manipulate data with JavaScript in Sencha Ext JS. Using the Ext JS Grid, you can sort, filter, and group data easily. Also, by utilizing the Grid Plugins, you can add even more data manipulation functions to your Sencha Ext JS web application.

Sencha ExtJS is a powerful JavaScript framework for building data-intensive web applications for any modern device. Try it now for free to build cross-platform web apps.

Check out Sencha Ext JS today to build and display powerful interactive data grids!

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More