Displaying the Film data grid

First, let's start with the basics. Whenever we need to implement a complex screen, we need to start with the simplest component we can develop. When this component is working, we can start incrementing it and add more complex capabilities. So first, we need to create a Model to represent the film table. In this chapter, we are going to use the MVVM approach, so we can dive into capabilities we have not covered in previous chapters. Once we have this part of the code working, we can work with the relationships between the category, language, and actor tables.

The Film Model

First, we are going to create the Model to represent the film table. Let's not worry about the relationships this table has for now.

We need to create a new class named Packt.view.film.FilmsGrid, as follows:

Ext.define('Packt.model.film.Film', {
    extend: 'Packt.model.staticData.Base', //#1

    entityName: 'Film',

    idProperty: 'film_id',

    fields: [
        { name: 'film_id' },
   ...