Extjs Simple treeview inside panel

Question

I'm really new to ExtJS and trying to implement a simple layout. I have a main view like this :

Ext.define('TestApp.view.main.Main', {    
extend: 'Ext.container.Viewport',
xtype: 'app-main',
requires:[
    'Ext.tab.Panel',
    'Ext.layout.container.Border',
    'TestApp.view.main.MainController',
    'TestApp.view.main.MainModel'
],


controller: 'main',
viewModel: 'main',


layout: 'border',


items: [{
    region: 'north',
    xtype: 'appHeader'
}, {
    region: 'center',
    xtype: 'contentPanel',
    reference: 'contentPanel',
    ariaRole: 'main'
}]

});

Then, i have a ContentPanel view to create a panel on the left and one on the right

Ext.define('TestApp.view.ContentPanel', {    
extend: 'Ext.panel.Panel',
xtype: 'contentPanel',
requires: [
    'Ext.layout.container.Border',
    'TestApp.view.tree.Regions'
],
//<example>
exampleTitle: 'Border Layout',
//</example>
layout: 'border',
width: 500,
height: 400,


bodyBorder: false,


defaults: {
    collapsible: true,
    split: true,
    bodyPadding: 10
},


items: [
    {
        title: 'Regions',
        id: 'Regions',
        region:'west',
        floatable: false,
        collapsible: false,
        margin: '5 0 0 0',
        width: 250,
        html : '<p>Load treeview here</p>'
    },
    {
        title: 'Dashboard',
        collapsible: false,
        region: 'center',
        margin: '5 0 0 0',
        html: '<h2>Main Page</h2><p>This is where the main content would go</p>'
    }
]

});

Finally, i have created another view called Regions.js which is a simple treeView. I want to load this into the left column above (id:Regions)

Ext.define('TestApp.view.tree.Regions', {    
extend: 'Ext.tree.Panel',
xtype : 'region-tree',
title: 'Simple Tree',
width: 200,
height: 150,
store: 'personnel',
rootVisible: false

});

UPDATE, here is the store i am using

Ext.define('TestApp.store.Personnel', {
extend: 'Ext.data.Store',

alias: 'store.personnel',

fields: [
    'name', 'email', 'phone'
],

data: { items: [
    { name: 'Jean Luc', email: "[email protected]", phone: "555-111-1111" },
    { name: 'Worf',     email: "[email protected]",  phone: "555-222-2222" },
    { name: 'Deanna',   email: "[email protected]",    phone: "555-333-3333" },
    { name: 'Data',     email: "[email protected]",        phone: "555-444-4444" }
]},

proxy: {
    type: 'memory',
    reader: {
        type: 'json',
        rootProperty: 'items'
    }
}

});

I am unclear how i can load this treeview into the left panel in my ContentLayout.

Thanks for any help and sorry for the noob question

Saloo Saloo · Accepted Answer · 2016-09-08T09:21:21

You have to add it as an item in the west region.

{
        title: 'Regions',
        id: 'Regions',
        region:'west',
        floatable: false,
        collapsible: false,
        margin: '5 0 0 0',
        width: 250,
        html : '<p>Load treeview here</p>',
        items:[{
               xtype:'region-tree'
        }]
    },

Docs says:

items : Object/Object[]
A single item, or an array of child Components to be added to this container

Extjs Simple treeview inside panel

1 Answers