JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

How to Quickly Customize Ext JS Data Grid (Part 1/6) – Built-In Grid & Column Properties

February 27, 2020 3642 Views
Show

Ext JS Data Grid is lightweight, powerful, and adaptable. Users can quickly customize the look and feel of the grid with Ext JS to suit their application. In a 6-part blog series, I’ll go over various methods for quickly customizing an Ext JS Data Grid.

We will create a simple grid that will display NBA 2020 player ratings. Don’t hesitate to try creating your own data grid using Javascript Grid Libraries! Because it’s fun! It supports various frameworks for JS grid, React grid, Angular grid, and Webcomponents grid.

This first blog demonstrates customization using Built-In Grid and Column Properties.

 

Setup Ext JS Grid

We first define a Ext.data.Model which is basically a collection of fields representing a type of data. Here we are defining the fields ‘player’, ‘team’ and ‘rating’.

Ext.define(‘Player’, {
extend: ‘Ext.data.Model’,
fields: [‘player’, ‘team’, {
name: ‘rating’,
type: ‘int’
}] });

Now setup the Ext.data.Store containing the user instances. The example shows individual data, but in a real world application, the data could also be loaded from a server. You can do that easily using Ext.data.proxy.Proxy

Here we are storing the data associated with ‘player’,’ team’ and ‘rating’.

var store = Ext.create(‘Ext.data.Store’, {
model: ‘Player’,
data: [{
player: ‘Kemba Walker’,
team: ‘Boston Celtics’,
rating: 88
}, {
player: ‘Josh Richardson’,
team: ‘Philadelphia 76ers’,
rating: 79
}] });

To display the data, we will use Ext.grid.Panel and customize it.

Ext.create(‘Ext.grid.Panel’, {
renderTo: document.body,
title: ‘NBA 2K20 player rating’,
//Define store
store: store,
columns: [{
dataIndex: ‘player’,
text: ‘Name’,
}, {
dataIndex: ‘rating’,
text: ‘Rating’,
}, {
dataIndex: ‘team’,
text: ‘Team’,
}] });

Customize Grid and Column Properties

The grid created above with no customization looks dry and static. 
Here are some popular properties you can use to make the grid more feature friendly. 

Grid Properties:

  • collapsible: expand/collapse toggle tool added to the header
  • headerBorders [classic]: display or hide grid borders
  • selModel [classic]: configuration for selection strategy
  • hideHeaders : hide column headers
  • title : display title in grid title bar
  • width, height: specify grid width and height
  • store: contains the data displayed

Column Properties:

  • dataIndex : field name in model
  • text: column header text
  • locked: lock a specific column
  • sortable: allow column sorting
  • width: adjust column width
  • flex: adjust column flex
  • align: adjust column align

simple-grid

Ext.create(‘Ext.grid.Panel’, {
renderTo: document.body,
title: ‘NBA 2K20 player rating’,
//Turn on collapsible
collapsible: true,
//Display borders
headerBorders: true,
//Define store
store: store,
columns: [{
dataIndex: ‘player’,
text: ‘Name’,
//Lock column
locked: true,
width: 150,
//Deactivate sort
sortable: false
}, {
dataIndex: ‘rating’,
text: ‘Rating’,
flex: 1
}, {
dataIndex: ‘team’,
text: ‘Team’,
flex: 1,
//Deactivate sort
sortable: false
}] });

Explore the code in the Fiddle tool

For more config properties, view the extensive Ext JS Grid and Panel documentation.

Stay tuned for our next blog covering “Grouping 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.

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at