0

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);
    }
});
0

1 Answer 1

0

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()
});
2
  • Yup your right, it only needed a height and width configs. I must be getting sleepy. I used onRender, because this is what I am used to. I do not know if this is advisable or not. Which is it anyway? Thank you for the answer by the way.
    – oneofakind
    Oct 20, 2014 at 5:39
  • You usually override the onRender method when you need to run some functions and manipulate data before you add your panels. But even for this I would use the render listener instead just to keep it organized. Also there is no need to override the initComponent method just to do the callParent if you are not doing anything there. :) Oct 20, 2014 at 5:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.