In the preceding chapter, we developed the static data module that consisted of emulating the edition of a table from a database. Basically, it was a Create, Read, Update, Delete (CRUD) of a single table with some extra capabilities. In this chapter, we are going further in the complexity of managing information from a table. Usually, in real-world applications, the tables, the information of which we want to manage have relationships with other tables, and we have to manage the relationships as well. And this is what this chapter is all about. How can we build screens and manage complex information in Ext JS?
So in this chapter, we will cover:
- Managing complex information with Ext JS
- How to handle many-to-many associations
- Forms with associations
- Reusing components
The Sakila database has four major modules within it: Inventory, which consists of the films' information, along with the inventory information (how many movies we have in each store available for rental); customer data, which consists of customer information; business, which consists of the stores, staff and also rental and payment information (this depends on inventory and customer data to feed some information); and views, which consists of data we can use for reports and charts.
For now, we are only interested in Inventory, customer data, and business, which contains the core business information of the application. Let's take a look at Inventory, which has more tables than the other two:
According to the Sakila documentation:
The film table is a list of all films potentially in stock in the stores. The actual in-stock copies of each film are represented in the inventory table.
The film table refers to the language table and is referred to by the film_category, film_actor, and inventory tables.
The film table has a many-to-many relationship with the category and actor tables. It has two many-to-one relationships with the language table. In the last chapter, we have already developed code to manage the category, actor, and language tables. Now, we need to manage the relationships between the film table and these other tables.
Ext JS 5 has really nice capabilities to manage associated entities similar to the film table. We will dive into them in this chapter.
So let's take a brief look at the screens that we are going to develop in this chapter.
First, we need a screen to list the films we have, which is as follows:
This screen displays three data grids. The first one is the film table, which is going to display the list of all Films. The second one is the Film Categories, which represents the many-to-many relationship between the film and category tables. And the third one is the Film Actors, which represents the many-to-many relationship between the film and actor tables.
Then, if we want to create or edit a film, we will create a FormPanel within a window so that we can edit its information, as follows:
As the film table has a many-to-many association with the categories table, we also need to handle it within the FormPanel using a different tab. If we want to add more categories associated with the film, we can Search and add, as follows:
Likewise, the film table has also a many-to-many association with the actor table, so we also need to handle it within the FormPanel. The following screenshot exemplifies this:
If we want to add more actors associated to the film, we can use Search and Add Actor, as follows:
Notice that we are taking a different approach for each screen. This way we can learn more ways of handling these scenarios in Ext JS. By the end of this chapter, we will learn to create this complex form and save associated data as well.
So now that we have an idea of what we will implement throughout this chapter, let's have some fun and get our hands dirty!