Chapter 9. Taking root with trees

 

This chapter covers

  • Dissecting the tree panel widget
  • Rendering in-memory data
  • Using a remote-loading data tree panel
  • Creating a custom context menu
  • Editing node data

In this chapter you’ll learn about the Ext JS tree panel, which is used to display hierarchical data, much like a typical filesystem. You’ll learn how to set up both static and dynamic implementations of this widget. After getting comfortable with this component, you’ll set up CRUD operations by using a data store and a dynamically updating context menu.

9.1. Tree panel theory

To understand trees you first need to understand hierarchy. Hierarchy is an arrangement of relationships where items belong above, under, or at the same level as one another. In simple implementations it’s a one-to-one relationship, but it can also be a complex many-to-many ordered set. Hierarchies exist in societies, corporations, the military, social networks, education and learning, psychology, and, of course, computer science.

9.1.1. Tree panel keywords

You also need to understand the special vocabulary tied to hierarchy and trees. Certain concepts are represented by various names, which is why it’s a good idea to define the terminology before getting any deeper into the subject. Table 9.1 explains Sencha’s terminology.

9.2. Planting your first tree panel

9.3. Growing dynamic tree panels

9.4. Implementing CRUD on a tree panel

9.5. Summary