Panel VBOX does not render items

Question

As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.

Ext.define('anr.panels.report', {
    extend          : 'Ext.panel.Panel',
    pageLimit       : 15,
    title           : 'Report Generator',
    layout          : 'border',
    border          : false,
    frame           : true,

    initComponent: function() {

        this.callParent(arguments);
    },

    onRender:function() {

        var me = this;

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

         var reportItem = {
            xtype: 'panel',
            layout: 'vbox',
            id:'westpanel',
            region:'west',
            width: 350,
            height: 300,
            minSize: 350,
            maxSize: 350,
            border: false,
            split: true,
            margin: '1 0 5 1',
            items: [
                {
                    border: false,
                    layout: 'border',
                    items:[
                        {
                            xtype: 'treepanel',
                            height: 250,
                            width: 200,
                            store: store,
                            id: 'menu-panel',
                            frame: false,
                            rootVisible: false
                        }
                    ]
                }
            ]
        };

        this.add(reportItem);
        this.callParent(arguments);
    }
});

Answer 1

Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.

Every border panel needs height, width or flex and it is required to have one panel with the center region.

If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.

CODE

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

Ext.define('anr.panels.report', {
    extend : 'Ext.panel.Panel',
    width: 800,
    height: 400,
    border: true,
    title : 'Report Generator',
    layout : 'border',            
    items: [{
        xtype: 'panel',
        layout: 'vbox',
        region:'west',
        width: 350,
        height: 300,
        minSize: 350,
        maxSize: 350,
        border: false,
        split: true,
        margin: '1 0 5 1',
        items: [{
            xtype: 'panel',
            border: false,
            layout: 'border',
            flex: 1,
            width: 350,
            items:[{
                xtype: 'treepanel',
                height: 250,
                width: 200,
                store: store,
                id: 'menu-panel',
                region: 'center',
                frame: false,
                rootVisible: false
            }]
        }]
    },{
        xtype : 'panel',
        region: 'center'
    }]

});

Ext.create('anr.panels.report',{
    renderTo: Ext.getBody()
});