ExtJS treepanel not showing

Question

So i made a simple app with 4 regions, north, east, south and west. I want to load a treepanel(static) in the west region. My code for the westregion is as follows:

........................
{
        region: 'west',
        title: 'Hierarchy',
        iconCls:'icon-map',
        width: 250,
        items: treepanel
}
........................

My panel and store are the one from the docs tutorial and looks as follows:

var store = Ext.create('Ext.data.TreeStore', {
root: {
    text: "/",
    expanded: true,
    children: [
        { text: "detention", leaf: true },
        { text: "homework", expanded: true, children: [
            { text: "book report", leaf: true },
            { text: "alegrbra", leaf: true}
        ] },
        { text: "buy lottery tickets", leaf: true }
    ]
}
});

var treepanel = Ext.create('Ext.tree.Panel', {
   title: 'Simple Tree',
   width: 200,
   height: 150,
   store: store,
   rootVisible: true,

});

The only problem is that the treeview is not showing.. Anybody know how to fix this?

Sérgio Mesquita Sérgio Mesquita · Accepted Answer · 2014-10-30T10:17:14

You can add the region to the tree panel himself:

var treepanel = Ext.create('Ext.tree.Panel', {
   region: 'west',
   title: 'Simple Tree',
   width: 200,
   height: 150,
   store: store,
   rootVisible: true,
});

and them, in the viewport you add the treepanel in the items:

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        ...
    }, treepanel, {
        region: 'south',
        ...
    }, {
        region: 'east',
        ...
    }, {
        region: 'center',
        ...
    }]
});

Complete working example:

<html lang="en">
<head>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>

</head>
<body>
<script>
Ext.onReady(function(){
    var store = Ext.create('Ext.data.TreeStore', {
    root: {
        text: "/",
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
    });

    var treepanel = Ext.create('Ext.tree.Panel', {
       title: 'Simple Tree',
       region: 'west',
       width: 200,
       height: 150,
       store: store,
       rootVisible: true,
       renderTo: Ext.getBody()

    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [{
            region: 'north',
            title: 'North',
            html: 'North'
        }, treepanel, {
            region: 'south',
            title: 'South',
            html: 'South'
        }, {
            region: 'east',
            title: 'East',
            html: 'East'
        }, {
            region: 'center',
            title: 'Center',
            html: 'Center'
        }]
    });

});
</script>
</body>
</html>

ExtJS treepanel not showing

1 Answers