The tree grid panel has the power of the tree, mixed with the flexibility of the grid panel. This tree configuration is very handy when we want to show more information in our tree panel. As a matter of fact, the tree grid is an Ext.tree.Panel with its columns configuration being the same as in the grid. It also needs some dependencies (Ext JS require) from the grid component, such as columns and others.

You can use the same column types as in the grid component (date, checkbox, template, widgets, and so on). For this example, we need to create the column definitions that our tree panel will be using. It is the same process as is used when we define columns for a grid component.

In this example, we are going to list our Menu (the previous example's data) bar in an extended way, like a permission assignment for the user profile

First, we will create our data model to specify fields that are not considered for a tree data model:

Ext.define('Myapp.model.Tree', {
  extend: 'Ext...