extjs - vbox with children
HTML
<link rel="stylesheet" type="text/css" href="//cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all-debug.css" />
JavaScript
Ext.define('WD40.view.legend.Utils', {
singleton: true,
createTreeColumsSpec: function(renderFunction) {
return [{
xtype: 'treecolumn',
flex: 1,
text: 'text',
dataIndex: 'text',
renderer: renderFunction
}];
},
createTools: function(prefix) {
return [{
type: 'plus',
id: prefix + 'plustool',
tooltip: "Show selected document highlights"
}, {
type: 'minus',
id: prefix + 'minustool',
tooltip: "Hide selected document highlights"
}];
}
});
Ext.define('WD40.view.Legend', {
extend: 'Ext.panel.Panel',
alias: 'widget.wd40legend',
requires: ['WD40.view.legend.Utils'],
layout: {
type: 'vbox',
align : 'stretch'
},
items: [
{
xtype: 'treepanel',
title: 'Base Linguistics',
width: '20%',
border: 0,
rootVisible: false,
itemId: 'bltree',
id: 'bltree',
useArrows: true,
collapsible: true,
collapseFirst: false,
collapsed: false,
hideHeaders: true,
root: {
text: 'Root',
expanded: true,
children: [{
text: 'hello1',
expanded: true,
children: [
{
text: 'child 1',
leaf: true},
{
text: 'child 2',
leaf: true},
{
text: 'child 3',
leaf: true},
{
text: 'child 4',
leaf: true},
{
text: 'child 5',
leaf: true},
{
text: 'child 6',
leaf: true},
{
text: 'child 7',
leaf: true},
...