The main function of the Grid panel is to display data, so this means that we always need to use a store. In Chapter 4, It's All about the Data, we talked about the use of data packages (models and stores). Like other components, the grid uses the data in the store in order to display it. It's usually seen that Ext JS has classes that have their own responsibilities. On one hand, the grid is responsible for displaying data, while on the other hand, the responsibility of the store is to fetch, update, erase, and manipulate data.

At this moment, in order to advance further, we need to use the Customer data model used in the One-to-one association section of Chapter 4, It's All about the Data. The code is as follows:

Ext.define('Myapp.model.Customer'{
  extend:'Ext.data.Model',  // step 1
  requires: ['Myapp.model.Contract'],
  idProperty:'id',   // step 2
  fields:[ // step 3
    {name: 'id'   , type: 'int'},
    {name: 'name'    , type: 'string'},
  ...