The Ext.tree.Panel class is a component in Ext JS, and also a great tool that allows us to display and use hierarchical data. A good example of this is a file directory application.

Ext.tree.Panel extends from Ext.panel.Table, which is the same class that the Ext.grid.Panel extends from. Features such as columns, sorting, filtering, renderers, dragging and dropping, plugins, and extensions are expected to work in Ext.tree.Panel as well. The main difference between the Ext.grid.Panel and Ext.tree.Panel classes is in the way they render data.

It's important to mention that this component is also data aware, so for it, we must use Ext.data.TreeStore, which is a data store specially designed to work with the tree panel. In this chapter, you'll learn how Ext.tree.Panel works, its versatility, and ease of use.

The topics we are going to cover in this chapter are as follows: