The next step is creating the Films screen that we presented at the beginning of this chapter. It consists of a toolbar with a button (Add), the Films grid, and two associated grids (Categories and Actors). We are going to create this View in the Films.js file, as follows:
Ext.define('Packt.view.film.Films', {
extend: 'Ext.panel.Panel',
xtype: 'films',
requires: [
'Packt.view.base.TopToolBar',
'Packt.view.film.FilmsGrid',
'Packt.view.film.FilmActorsGrid',
'Packt.view.film.FilmCategoriesGrid',
'Packt.view.film.FilmsModel',
'Packt.view.film.FilmsController'
],
controller: 'films', //#1
viewModel: {
type: 'films' //#2
},
session: true, //#3
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'films-grid', //#4
flex: 1
},{
xtype: 'container',
split: true,
layout: {
type:...