5 min read

Tree panel

The tree component is much more simplified in Ext JS 4. Like grid, it is also a subclass of Ext.panel.Table. This means we can add most functionality of the grid in the tree as well.

Let’s start declaring a simple tree in Ext JS 3:

new Ext.tree.TreePanel({
   renderTo: 'tree-example',
   title: 'Simple Tree',
   width: 200,
   rootVisible: false, 
   root: new Ext.tree.AsyncTreeNode({
      expanded: true,
      children: [
          { text: "Menu Option 1", leaf: true },
          { text: "Menu Option 2", expanded: true, 
             children: [
                   { text: "Sub Menu Option 2.1", leaf: true },
                   { text: "Sub Menu Option 2.2", leaf: true}
          ] },
          { text: "Menu Option 3", leaf: true }
      ]
   })
});

Now, let’s see how to declare the same tree in Ext JS:

Ext.create('Ext.tree.Panel', {
   title: 'Simple Tree',
   width: 200,
   store: Ext.create('Ext.data.TreeStore', {
      root: {
         expanded: true, 
         children: [
            { text: "Menu Option 1", leaf: true },
            { text: "Menu Option 2", expanded: true, 
               children: [
                    { text: "Sub Menu Option 2.1", leaf: true },
                    { text: "Sub Menu Option 2.2", leaf: true}
            ] },
            { text: "Menu Option 3", leaf: true }
          ]
      }
   }),
   rootVisible: false, 
   renderTo: 'tree-example'
});

In Ext JS 4, we also have the title, width, and div properties, where the tree is going to be rendered, and a config store. The store config is a new element for the tree.

If we output both of the codes, we will have the same output, which is the following tree:

If we take a look at the data package, we will see three files related to tree: NodeInterface, Tree, and TreeStore.

NodeInterface applies a set of methods to the prototype of a record to decorate it with a Node API. The Tree class is used as a container of a series of nodes and TreeStore is a store implementation used by a Tree. The good thing about having TreeStore is that we can use its features, such as proxy and reader, as we do for any other Store in Ext JS 4.

Drag-and-drop and sorting

The drag-and-drop feature is very useful for rearranging the order of the nodes in the Tree class.

Adding the drag-and-drop feature is very simple. We need to add the following code into the tree declaration:

Ext.create('Ext.tree.Panel', {
   store: store,
   viewConfig: {
      plugins: {
         ptype: 'treeviewdragdrop'
      }
   },
   //other properties
});

And how do we handle drag-and-drop in store?

We do it in the same way as we handled the edition plugin on the Grid, using a Writer:

var store = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        api: {
            read : '../data/drag-drop.json',
            create : 'create.php'
        }
    },
    writer: {
        type: 'json',
        writeAllFields: true,
        encode: false
    },
    autoSync:true
});

In the earlier versions of Ext JS 4, the autoSync config option does work. Another way of synchronizing the Store with the server is adding a listener to the Store instead of the autoSync config option, as follows:

listeners: {
    move: function( node, oldParent, newParent, index, 
options ) {
        this.sync();
    }
}

And, to add the sorting feature to the Tree class, we simply need to configure the sorters property in the TreeStore, as follows:

Ext.create('Ext.data.TreeStore', {
   folderSort: true,
   sorters: [{
      property: 'text',
      direction: 'ASC'
   }]
});

Check tree

To implement a check tree, we simply need to make a few changes in the data that we are going to apply to the Tree. We need to add a property called checked to each node, with a true or false value; true indicates the node is checked, and false, otherwise.

For this example, we will use the following json code:

 [{
    "text": "Cartesian", 
    "cls": "folder",
    "expanded": true,
    "children": [{
        "text": "Bar",
        "leaf": true,
        "checked": true
    },{
        "text": "Column",
        "leaf": true,
        "checked": true
    },{
        "text": "Line",
        "leaf": true,
        "checked": false
    }]
},{
    "text": "Gauge",
    "leaf": true,
    "checked": false
},{
    "text": "Pie",
    "leaf": true,
    "checked": true
}]

And as we can see, the code is the same as that for a simple tree:

var store = Ext.create('Ext.data.TreeStore', {
   proxy: {
      type: 'ajax',
      url: 'data/check-nodes.json'
   },
   sorters: [{
      property: 'leaf',
      direction: 'ASC'
   }, {
      property: 'text',
      direction: 'ASC'
   }]
});
Ext.create('Ext.tree.Panel', {
   store: store,
   rootVisible: false,
   useArrows: true,
   frame: true,
   title: 'Charts I have studied',
   renderTo: 'tree-example',
   width: 200,
   height: 250
});

The preceding code will output the following tree:

Tree grid

In Ext JS 3, the client JavaScript Component, Tree Grid, was an extension part of the ux package. In Ext JS 4, this Component is part of the native API but it is no longer an extension. To implement a Tree Grid, we are going to use the Tree Component as well; the only difference is that we are going to declare some columns inside the tree. This is the good part of Tree being a subclass of Ext.panel.Table, the same super class for Grid as well.

First, we will declare a Model and a Store, to represent the data we are going to display in the Tree Grid. We will then load the Tree Grid:

Ext.define('Book', {
   extend: 'Ext.data.Model',
   fields: [
      {name: 'book',     type: 'string'},
      {name: 'pages',     type: 'string'}
   ]
});
var store = Ext.create('Ext.data.TreeStore', {
   model: 'Book',
   proxy: {
      type: 'ajax',
      url: 'data/treegrid.json'
   },
   folderSort: true
});

So far there is no news. We declared the variable store as any other used in a grid, except that this one is a TreeStore.

The code to implement the Component Tree Grid is declared as follows:

Ext.create('Ext.tree.Panel', {
   title: 'Books',
   width: 500,
   height: 300,
   renderTo: Ext.getBody(),
   collapsible: true,
   useArrows: true,
   rootVisible: false,
   store: store,
   multiSelect: true,
   singleExpand: true,
   columns: [{
      xtype: 'treecolumn',
      text: 'Task',
      flex: 2,
      sortable: true,
      dataIndex: 'task'
   },{
      text: 'Assigned To',
      flex: 1,
      dataIndex: 'user',
      sortable: true
   }]
});

The most important line of code is highlighted—the columns declaration. The columns property is an array of Ext.grid.column.Column objects, as we declare in a grid.

The only thing we have to pay attention to is the column type of the first column, that is, treecolumn; this way we know that we have to render the node into the Tree Grid.

We also configured some other properties. collapsible is a Boolean property; if set to true it will allow us to collapse and expand the nodes of the tree. The useArrows is also a Boolean property, which indicates whether the arrow icon will be visible in the tree (expand/collapse icons). The property rootVisible indicates whether we want to display the root of the tree, which is a simple period (.). The property singleExpand indicates whether we want to expand a single node at a time and the multiSelect property indicates whether we want to select more than one node at once.

The preceding code will output the following tree grid:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here