Chapter 11. Taking root with trees
This chapter covers
- Dissecting the TreePanel widget
- Rendering in-memory data with TreePanels
- Implementing a remote-loading data TreePanel
- Adding a custom ContextMenu to TreePanel nodes
- Exercising full CRUD lifecycle for nodes
- Using a TreeEditor to edit node data
I can recall the first time I was tasked to create an application with what was known then as a TreeView. I had to allow for the navigation directory in a filesystem, which required that I allow users to modify the filenames easily. I was lucky that I had Ext JS in my toolbox to aid me in my task. Using the framework not only made things easier, but it also sped up the development time of this task dramatically.
In this chapter, you’ll learn about the Ext JS TreePanel, 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 work to set up CRUD operations by use of a dynamically updating context menu and Ajax.requests to send data. This is going to be a fun chapter.
In the UI world, the word tree is meant to describe a widget or control that displays hierarchical data, which generally begins at some central point, known as a root. And like the botanical tree, trees in UIs have branches, which means that they contain other branches or leaves. Unlike botanical trees, computer trees have only one root.