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:
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.