I have a TabPanel and I want to add a tab to it at runtime and then add content to the new tab. The new tab gets updated each time some one clicks a navigation tree link (to paint new image graphs inside the tab). I do not want to make the new tab active upon update but if I don't do a .show on it after updating it through an error. Here is my code :

        if (!MainBodyTabs.getItem('ReportsTab')) {

            ReportsTab = MainBodyTabs.add({
                id: 'ReportsTab',
                title: 'Reports for ' + this.getName(),
                xtype: 'panel'
            });
        }

        var dh = Ext.DomHelper;
        var rDiv = document.createElement('div');
        rDiv.id = 'reportsdiv';
        rDiv.width = 500;
        rDiv.height = 308;

        pan = new Ext.ux.PanPanel({
            id: 'ReportPanPanel',
            border: false,
            client: rDiv,
            height: 310,
            width: 505,
            shadow: false,
            floating: true,
            x: 5, y: 10
        });  // eo p def

        ReportsTab.setTitle('Reports for ' + this.getName());
        if (Ext.get('ReportPanPanel')) {
            ReportsTab.remove('ReportPanPanel');
        }
        ReportsTab.show(); // I do not want to do this but without this I get an error
        ReportsTab.add(pan);
        ReportsTab.doLayout();
The error is :
<div class="errorTitle">el is null
<div class="errorSourceBox errorSource-exec">[img]chrome://firebug/content/blank.gif[/img]        if(el.insertAdjacentHTML){