Blog

Ext JS 4 Grid Components

March 14, 2011 | Brian Moeskau

We’re hard at work getting Ext JS 4 ready. So far we’ve shipped three developer previews, and are aiming to have the final release delivered in the next four-to-six weeks, but hopefully sooner. Our most recent developer preview was the first with the new Ext JS 4 Grid. Our grid components have been rewritten from the ground up for Ext JS 4 and will provide numerous benefits over the 3.x versions. The 4.0 grid includes greatly improved performance and flexibility, so extending it and adding new functionality will be easier than ever. Here's a rundown of the most important new features.

Intelligent Rendering

The Ext JS 3 grid works fantastically well, but it takes the "least common denominator" approach to its rich feature support by always generating the full markup needed by every grid feature (which is overly-heavy in most cases). In Ext JS 4, the default grid has very lightweight markup, and additional feature-specific markup is only rendered as developers enable different features. This is a huge boost both for page rendering speed and overall grid performance.

Standardized Layout

Along with a smarter rendering pipeline, many parts of the new grid have been made into proper Components and integrated into the standard layout management system rather than relying on custom internal markup and CSS. This enables us to unify the grid's rendering process with the rest of the framework, while still retaining a pixel-perfect UI experience.

DataView

The new GridView in Ext JS 4 extends the standard DataView class. This not only minimizes duplicated code internally, it also makes the new grid even easier to customize. Because it extends DataView, the new grid is also able to leverage the same selection models as any view, including non-contiguous selection via keyboard navigation.

Feature Support

In Ext JS 3, it was easy to add new functionality to grids, but there was no single strategy for doing it. Many added features were provided as plugins, but some were provided via subclassing. This made it very difficult (if not impossible) to combine certain features easily.

Ext JS 4 includes a new grid base class called Ext.grid.Feature which provides the basis for creating extremely flexible optional grid features. The underlying grid templates can be modified by any Feature classes in order to decorate or mutate the markup that the grid's view generates. Features provide a powerful alternative to subclassing the old GridView because it makes it easy to mix and match compatible features. Some examples of Features in the new grid are RowWrap, RowBody and Grouping.

Virtual Scrolling

The Ext 4 grid now natively supports buffering its data during rendering, providing a virtual, load-on-demand view of its data. Grids will now easily support hundreds or even thousands of records without paging, which will be a massive improvement over the Ext JS 3 grid's data handling capacity.

Editing Improvements

In Ext JS 3, developers had to use the specialized EditorGrid class to provide an editable grid, which limited its flexibility. In Ext JS 4, there is now an Editing plugin that can be applied to any grid instance, making it completely reusable across all grids. In addition, the popular RowEditor extension from Ext JS 3 has been promoted to a first-class and fully-supported framework component in Ext JS 4.

An Example

Here's the setup of a basic grid with grouping in Ext JS 4. It's impossible to cover all of the new functionality in only one example, but this should give you a good taste of the new grid in action. As you can see, the configuration is very similar to that in Ext JS 3, but the grouping functionality is now a simple feature config, rather than an entire custom GroupingView instance as required in Ext JS 3. This is but one example of the new flexibility in Ext JS 4. Also, grouping is now supported directly in the standard Store, so a separate GroupingStore is not needed either.

Ext.onReady(function() {
   Ext.regModel('Teams', {
       fields: ['name', 'sport']
   });
 
   var teamStore = new Ext.data.Store({
       model: 'Teams',
       sorters: ['sport','name'],
       groupField: 'sport',
       data: [
           { name: 'Aaron', sport: 'Table Tennis' },
           { name: 'Aaron', sport: 'Football' },
           { name: 'Abe', sport: 'Basketball' },
           { name: 'Tommy', sport: 'Football' },
           { name: 'Tommy', sport: 'Basketball' },
           { name: 'Jamie', sport: 'Table Tennis' },
           { name: 'Brian', sport: 'Basketball' },
           { name: 'Brian', sport: 'Table Tennis' }
       ]
   });
 
   var grid = new Ext.grid.GridPanel({
       renderTo: Ext.getBody(),
       store: teamStore,
       width: 400,
       height: 300,
       title: 'Sports Teams',
       features: [{
           ftype: 'grouping'
       }],
       headers: [{
           text: 'Name',
           flex: 1,
           dataIndex: 'name'
       },{
           text: 'Sport',
           dataIndex: 'sport'
       }]
   });
});