We already have the login capability that we implemented throughout Chapter 3, The Login Page, and the base of the application, that we implemented in Chapter 4, The Logout and Multilingual Capabilities. In the base of our application there is one missing piece, which is the menu. So the next thing we are going to develop is the dynamic menu.
Once the user has been authenticated, we are going to display the base screen of the application, which consists of a Viewport with a Border layout. On the left-hand side of the Viewport, we are going to display a menu. This menu will be dynamic, and the items that will be displayed on the menu depend on the permissions that the user has, which is why we call it a dynamic menu.
One of the options is to render all the screens of the system and then, depending on the user roles, we can hide or show them. However, this is not the approach we are going to use in this book. We are going to render and display only the screens the user has access to. The approach we are going to use is to dynamically render a menu according to the user entitlements.
So in this chapter, we will learn how to display a dynamic menu using different Ext JS components and layouts (that we have not covered yet). To summarize, in this chapter, we will cover:
- Creating a dynamic menu with the Accordion layout and TreePanel
- Using the Model association to load the data from the server
- Handling the dynamic menu on the server
- Opening a menu item dynamically
- Using the MVC architecture
So the first component that we are going to implement in this chapter is the dynamic menu. We could use only a TreePanel to display the menu, but we do like a challenge and we want to offer the best experience to the user. So, we are going to implement a dynamic menu using the Accordion layout and TreePanels, which results in a more advanced dynamic menu.
Our system consists of modules, and each module has subitems, which are the screens of our system. An accordion panel will represent the menu itself with all the modules; this way, the user can expand to see the options of each module at a time. And for the options of each module, we will use a TreePanel; each option of the menu will be a node from the TreePanel.
So, at the end of this topic, we will have a dynamic menu like the following screenshot:
Before we get started with the dynamic menu, let's take a quick look at how the Ext JS TreePanel component works and how the Accordion layout works. Understanding these two concepts first will make it easier to understand how the dynamic menu is implemented.
A TreePanel is the perfect component to display hierarchical data in an application. This is the reason why we will use it to display the menu. The following image exemplifies a TreePanel and its pieces:
As we learned in Chapter 1, Sencha Ext JS Overview, the TreePanel extends from the Ext.panel.Table class, and so does the GridPanel. The Ext.panel.Table class extends from the Panel class. All the Panel classes have a shell, which is the panel itself, which allows us to set a title and add toolbars and also add child items.
The piece that is responsible for displaying the data is called the View, which is of the type Ext.view.View, and it is placed inside the Panel container. There are two ways that we can set data to a TreePanel: predefined using the root configuration or using a Store.
The Store behaves as our
Data Access Object (DAO). In this example, we will load data from the server, so we will use a Store. The Store loads a collection of objects that we call Model (Ext.data.Model). In the case of the TreePanel, these models are decorated with NodeInterface (Ext.data.NodeInterface).
Note
For more information about the decorator pattern, please access http://en.wikipedia.org/wiki/Decorator_pattern.
We can choose to show or hide Root of the TreePanel. In the preceding image, Root is visible (the node called Root).
Each Node of a TreePanel can have Children (in as many nested levels as needed). When a Node does not have any child, we call it a Leaf.
We will dive more into the TreePanel when we implement the menu later in this chapter. For now, these are the concepts that we need to be familiar with.
The Accordion layout manages multiple panels in an expandable accordion style such that by default only one panel can be expanded at any given time (this can be changed by setting the multi configuration as true). Only Ext panels and all subclasses of Ext.panel.Panel can be used in an Accordion layout container.
We could implement the dynamic menu using only a TreePanel, but we do like a challenge! Besides, from the UI point of view, having the modules separated by an Accordion layout container looks prettier than a simple TreePanel, as we can see in the following image:
The menu itself is a panel that uses the Accordion layout. A TreePanel represents each module of the menu (note that you can expand or collapse each module due the capabilities of the Accordion layout). We are going to load the required data to display this menu from the server, and we are going to load the data from the database according to the user entitlements. That is why we call it a dynamic menu.
Note
An important note on this approach: we are creating a TreePanel for each module for navigation. Creating many objects at the same time has some disadvantages, such as memory consumption. We can also create a single TreePanel and display all the modules as nodes with children. For more information about JavaScript, and memory consumption and its problems, please read https://developer.chrome.com/devtools/docs/javascript-memory-profiling.
So now that we are familiar with all the concepts, we can start with the menu!