O'Reilly logo

Ext JS Essentials by Stuart Ashworth, Andrew Duncan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Displaying tabular data

The grid component is one of the biggest reasons Ext JS is selected by developers. Its performance, features, and flexibility make it a powerful feature. In this section, we will work through an example of creating a grid to display our product data.

Product data

Before we dive into creating a grid component, we must create a data store that will hold the product data that our grid will display. In Chapter 5, Modeling Data Structures for Your UI, we defined the models that represent our product data, but we didn't create a products store to hold a collection of product model instances. To do this, we create a new file called Products.js in the store folder of our project with the following class definition:

Ext.define('BizDash.store.Products', ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required