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