Gridpanel can't be displayed on TabPanel after closed and opened again

[faliqulamin]

Hello ALL,

I apologize if this question has been answered before, and sorry for my english
I have a problem when I tried to show gridpanel into TabPanel, the first time I opened the TabPanel, gridpanel can displayed but when the tab panel is closed and reopened, gridpanel can not be displayed
HELP ME PLEASE
Is there something wrong with my source code below?

MainPanel SourceCode

Ext.require(['*']);
Ext.onReady(function() {
    var cw;
      
    Ext.create('Ext.Viewport', {
        layout: {
            type: 'border',
            padding: 5
        },
        defaults: {
            split: true
        },
        items: [{
            xtype:'container',
            region: 'north',
            //collapsible: true,
            title: 'North',
            split: false,
            height: 90,
            minHeight: 60,
            
            //html: 'north',
            layout: {
                type: 'border' //, digunakan untuk menambhkan space antar item
                //padding: 5 
            },
            items: [{
                xtype : 'toolbar',
                region : 'south',
                height : 30,
                                    items : [ {
                                    text : 'System',
                                    menu : {
                                        xtype : 'menu',
                                        plain : true,
                                        region : 'east',
                                        items : [ {
                                            text : 'Ganti Password'
                                        }, {
                                            text : 'User Management',
                                            scope : this,
                                            handler : function(){
                                            AddTabs('User Management','user');
                                            }
                                        },{
                                            text : 'Logout'
                                        } ]
                                    }
                                }, {
                                    text : 'Master Data',
                                    menu : {
                                        xtype : 'menu',
                                        plain : true,
                                        items : [ {
                                            text : 'Transmisi',
                                            scope : this,
                                            handler : function(item){
                                                Ext.getCmp('TabCenterPanel').displayScreen(item.screenType);
                                            },
                                            screenType : 'belajar.form.RoleForm'
                                        }, {
                                            text : 'Network Element (NE)'
                                        },{
                                            text:'Modul'
                                        },{
                                            text:'Customer'
                                        } ]
                                    }
                                }, {
                                    text : 'Data link',
                                    menu : {
                                        xtype : 'menu',
                                        plain : true,
                                        items  : [{
                                            text:'Data Channel'
                                        },{
                                            text:'Simulasi PerPu'
                                        }]
                                    }
                                }]
            }, {
                //title: 'South Western',
                xtype:'container',
                region: 'center',
                flex: 1,
                minWidth: 80,
                html : '<img src="src/img/head.png" alt="Telkom Siaga" height="60" width="441" />'
            }]
        },{
            id : 'TabCenterPanel',
            xtype : 'panel',
            region : 'center',
            items:[mainTabPanel]
        },{
            region: 'east',
            collapsible: true,
            floatable: true,
            split: true,
            width: 200,
            minWidth: 120,
            minHeight: 140,
            title: 'Info Transmisi',
            layout: {
                type: 'vbox',
                padding: 5,
                align: 'stretch'
            }
        }, {
            xtype : 'toolbar',
            region : 'south',
            height : 20,
            items : [ {
                text : 'current user : endy',
                xtype : 'label'
            } ]
        }
        ]
    });
});

TabPanel SourceCode

var tab1 = {
        id:'tab-1',
        //contentEl:'pnl-tab1',
        title: 'Home',
        viewConfig: {layout:'fit'},
        closable: true
    }


var mainTabPanel = new Ext.TabPanel({
        id:'mainTabPanel',
        region: 'center',
        activeTab: 0,
        items: [tab1]
    });    
    
function AddTabs(tabTitle,yourTabId){
    var YourTabPanel = Ext.getCmp('mainTabPanel');
    var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
    if(TabToCheck){
       YourTabPanel.setActiveTab(yourTabId);
    } else {
        YourTabPanel.add({
        title:tabTitle,
        id:yourTabId,
        closable:true,
        layout: 'fit',
        items :[grid3]
        }).show();
  }
  YourTabPanel.doLayout();
}

GridPanel SourceCode

var grid3 = new Ext.grid.Panel({        //store: getLocalStore(),
        columns: [
            Ext.create('Ext.grid.RowNumberer'),
            {text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
            {text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
            {text: "Change", width: 120, sortable: true, dataIndex: 'change'},
            {text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
            {text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
        ],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text:'Tambah',
                tooltip:'Tambah data'
            }, '-', {
                text:'Edit',
                tooltip:'Pilih data Terlebih dahulu'
            },'-',{
                itemId: 'removeButton',
                text:'Hapus',
                tooltip:'Remove the selected item',
            }]
        }],
        columnLines: true,
        region:'center',
        layout : 'fit',
        title:'Data User'

    });

First Time
before.jpg


After Closed TabPanel and Reopen it
after.jpg


thank you before

[Tim Toady]

Your grid is probably being destroyed when you close your tab. Then you try to add it again and the variable references nothing. You probably need to recreate the grid rather than using the old variable or handle it another way.

See paragraph 2 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel

[scottmartin]

Please see the following:
http://www.sencha.com/forum/showthread.php?214648

Scott.

[faliqulamin]

Thanks scottmartin

It worked. THANKS THANKS THANKS