How to Quickly Customize Ext JS Data Grid (Part 2/6)
In the first blog of this 6-part “Ext JS Grid Customization” blog series, we saw a few different ways to use built-in grid and column properties to customize a data grid. This blog demonstrates the use of built-in data display methods to quickly customize your data grid.
The example grid used here displays NBA 2020 player ratings.
This blog demonstrates grid customization using ‘Grouping Methods’.
Grouped Grid
A grouped grid provides useful views of the row/column data by enabling data aggregation into groups.
Here’s the code that enables the feature:
1. Activate feature in grid configuration:
2. Define group field in store configuration:
3. Customize grid (customize header or/and add summary row)
columns: [{
dataIndex: ‘player’,
flex: 1,
text: ‘Name’,
//Add a summary row
summaryType: ‘count’,
//Customize summary display
summaryRenderer: function (value) {
return Ext.String.format(‘{0} player{1}’, value, value !== 1 ? ‘s’ : ”);
}
}, {
dataIndex: ‘rating’,
text: ‘Rating’,
//Add a summary row
summaryType: ‘average’,
flex: 1
}]
Explore the code in the Fiddle Tool:
Grouped Grid Header
Users can customize header display by using grouped grid header
Here’s the code that groups the column display header:
Explore the code in the Fiddle Tool:
Stay tuned for our next blog covering “Row Editing” methods to customize grids.
Build Your Data Grid with Ext JS 7.1
The free 30-day trial of Ext JS 7.1 provides full access to the product features. Get started today and see how you can build a high-performing data grid for your application.
In modern software development, unit testing has become an essential practice to ensure the quality…
Highlights of Virtual JS Days 2024 From February 20-22, 2024, we held the third Virtual…
We are past the midpoint of 2023 and we are very proud of what we…