Ext JS 4 trees can be configured to display multiple columns for visualising advanced data structures. We will make a few minor changes to display the ID of each node in the tree. Simply adding a new column to the tree definition will achieve this purpose:
Ext.define('TTT.view.admin.CompanyTree', { extend: 'Ext.tree.Panel', xtype: 'companytree', title: 'Company -> Projects -> Tasks', requires: ['TTT.store.CompanyTree'], store: 'CompanyTree', lines: true, rootVisible: false, hideHeaders: false, viewConfig: { preserveScrollOnRefresh: true }, initComponent: function() { var me = this; Ext.applyIf(me, { tools: [{ type: 'expand', qtip: 'Expand All' }, { type: 'collapse', qtip: 'Collapse All' }, { type: 'refresh', qtip: 'Refresh Tree' }], columns: [{ xtype: 'treecolumn', text:'Node', dataIndex: 'text', flex: 1 }, { dataIndex: 'id', text : 'ID', width:60 }] }); me.callParent(arguments); } });
We have also added the text
property to each column, which is displayed in the header row, and enabled headers with hideHeaders:false
. These minor changes will result in the following tree being displayed when fully expanded:
3.15.206.25