Creating a tree menu in West Region

[aavila]

Hi All,

I've created an app using Sencha cmd. I generated the app with comand:


Sencha generate app -ext MyApp ./app

Once the app was generated, I see the west region in the view: Main.js

I'm trying to add a tree menu in the "West" region underneath the button. Can anyone point me as to how to do this? I've tried searching for:

Add a tree menu in west region EXTJS5.

Nothing comes up that's helpful. I see this:


Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
title: 'Simple Tree',
width: 300,
height: 250,
root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Child 1',
leaf: true
},
{
text: 'Child 2',
leaf: true
},
{
text: 'Child 3',
expanded: true,
children: [
{
text: 'Grandchild',
leaf: true
}
]
}
]
}
});


But when I change:
renderTo: Ext.getBody(), to
renderTo: Ext.getBody('treenav'), a div inside my west region, I get nothing. Below is my full main.js code:


/** * This class is the main view for the application. It is specified in `app.js` as the
* "autoCreateViewport" property. That setting automatically applies the "viewport"
* plugin to promote that instance of this class to the body element.
*
* TODO - Replace this content of this view to suite the needs of your application.
*/
Ext.define('ies.view.main.Main', {
extend: 'Ext.container.Container',
plugins: 'viewport',
requires: [
'ies.view.main.MainController',
'ies.view.main.MainModel'
],


xtype: 'app-main',


controller: 'main',
viewModel: {
type: 'main'
},


layout: {
type: 'border'
},


items: [{
xtype: 'panel',
bind: {
title: '{name}'
},
region: 'west',
html: '<div id="treenav" class="treenav"></div>',
width: 250,
split: true,
collapsible: true,
tbar: [{
text: 'Log Out',
handler: 'onClickButton'
}]
},
{
region: 'north',
xtype: 'component',
cls: 'appBanner',
padding: 10,
height: 60,
html: '<h1>IES Beacon - My Company Motto</h1>',
},
{
region: 'center',
xtype: 'tabpanel',
items:[{
title: 'Tab 1',
html: '<h2>Content appropriate for the current navigation.</h2>',
},{
title: 'The Data',
layout: 'fit',
items: [{
xtype: 'grid',
title: 'Simpsons',
store: {
fields:['name', 'email', 'phone'],
data:[
{ name: 'Lisa', email: "lisa@simpsons.com",
phone: "555-111-1224" },
{ name: 'Bart', email: "bart@simpsons.com",
phone: "555-222-1234" },
{ name: 'Homer', email: "home@simpsons.com",
phone: "555-222-1244" },
{ name: 'Marge', email: "marge@simpsons.com",
phone: "555-222-1254" }
],
proxy: {
type: 'memory'
}
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1},
{ text: 'Phone', dataIndex: 'phone' }
]
}]
}]
}]
});




Ext.create('Ext.tree.Panel', {
//renderTo: Ext.getBody('treenav'),
renderTo: Ext.get('treenav'),
title: 'Simple Tree',
width: 220,
height: 250,
root: {
text: 'Root',
expanded: true,
children: [
{
text: 'Child 1',
leaf: true
},
{
text: 'Child 2',
leaf: true
},
{
text: 'Child 3',
expanded: true,
children: [
{
text: 'Grandchild',
leaf: true
}
]
}
]
}
});

All help is truly appreciated!

[evant]

This is covered in the docs: http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-renderTo

Specifically:



Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.


Better yet, don't nest the tree in another panel, just make the tree be the west region.

[aavila]

This is covered in the docs: http://docs.sencha.com/extjs/5.1/5.1...t-cfg-renderToSpecifically:Do not use this option if the Component is to be a child item of a Container. It is the responsibility of the Container's layout manager to render and manage its child items.Better yet, don't nest the tree in another panel, just make the tree be the west region.

Thanks evant, I read that and figured I wasn't supposed to use that. I'm still very confused as to how to make the tree display on the west region. Any chance you have sample code or a link to a tutorial that shows how to achieve this?Thanks again!

[skirtle]

iqe

It's rare that you'll need to render a component directly. Usually your top-level component is the only one you'd render yourself, and even then only if it isn't being done automatically by the framework. Nested components will be rendered automatically by their containers.