Ext.getCmp('panel') gives this.el is null or not an object

Question

I have a border layout in which I have to expand and collapse the east region for some views, The screen works fine at the start, but when you click on the refresh button of the browser and if the east region is collapsed, then you got the east region as collapsed which according to my understanding should not happen because the extJS code is executed from the start every time you hit a refresh, and therefore the east region must be visible after doing a refresh.

To make the east region expanded every time a user hits a refresh I tried to to the following

    Ext.getCmp('center_panel').add({
        id: 'center_panel_container',
        layout: 'border',
        defaults: {
        'border': true
        },    
        items:[{
           id : 'header_panel',
           layout: 'fit',
           region: 'north',
           height: 30,
           items: [tbar]
        },{
           id: 'master_panel',
           layout: 'fit',
           region: 'center',
           width: '60%',
           bodyStyle:{"background-color":"white"},
           autoScroll: true,
           items: [panelLeft,panelLeftSchd,panelLeftStartUp]
        }, {
           id: 'report_panel',
           layout: 'fit',
           region: 'east',
           width : '40%',
           split:true,
           autoScroll: true,
           items: [panelRight,  panelRightStartUp]
    }]   
 });
        Ext.getCmp('report_panel').expand(true);

But I am getting the following error this.el is null or not an object .

How to make the east region expanded whenever a user hits a refresh each time

Thanks,

Answer 1

This is happening because Ext.getCmp('report_panel') is not rendered at the time you're trying to call its expand method. That is because Ext-JS sometimes uses a setTimeout when laying out components. The simplest solution is to wait for the render event and call expand from that handler

{
       id: 'report_panel',
       layout: 'fit',
       region: 'east',
       width : '40%',
       split:true,
       autoScroll: true,
       items: [panelRight,  panelRightStartUp],
       listeners: {
           render: function(panel) {
              panel.expand()
           }
       }
}

You can also wait for the afterlayout event of the parent container.