Results 1 to 4 of 4

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

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Bandung, Indonesia
    Posts
    12
    Vote Rating
    0
      0  

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

    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
    Code:
    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
    Code:
    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
    Code:
    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

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

    Scott.

  3. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    603
    Answers
    67
    Vote Rating
    284
      0  

    Default

    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

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Answers
    716
    Vote Rating
    499
      0  

    Default

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

    Scott.

  5. #4
    Sencha User
    Join Date
    Nov 2011
    Location
    Bandung, Indonesia
    Posts
    12
    Vote Rating
    0
      0  

    Default

    Thanks scottmartin

    It worked. THANKS THANKS THANKS

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •