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.
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: