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...