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:
features: [{ ftype: 'grouping' }],
2. Define group field in store configuration:
store: { model: 'Player', //Define group field groupField: 'team', data: [/* ... */] },
3. Customize grid (customize header or/and add summary row)
features: [{ ftype: 'grouping', //Customize group header groupHeaderTpl: 'Team: {name}', //Show summary row showSummaryRow: true }], 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:
columns: [{ dataIndex: 'player', flex: 1, text: 'Name', },{ text: 'Rating', columns: [{ dataIndex: 'rating', text: 'Overall rating', flex: 1 },{ dataIndex: 'threePointRating', text: '3PT rating', flex: 1 },{ dataIndex: 'dunkRating', text: 'Dunk rating', flex: 1 }] },{ dataIndex: 'position', text: 'Position', flex: 1 },{ dataIndex: 'ht', text: 'Height', flex: 1 }]
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.
Hi,
Can you show the same examples in Modern?
Thanks