Scrollbar does not appear in Gridpanel

[faliqulamin]

I tried to show Gridpanel that have many row in a TabPanel but no scrollbar appears.


I've been looking for this problem on this forum, and found some similar problems. but it can not solve my problem.

TabPanel 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',
                                            scope : this,
                                            handler : function(){
                                            window.location.href = 'index.html';
                                            }
                                        } ]
                                    }
                                }, {
                                    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',
            layout : 'fit',
            autoScroll: true,
            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',
        layout:'fit',
        closable: false
    }


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 {
        if(yourTabId=='user'){
            YourTabPanel.add({
            title:tabTitle,
            id:yourTabId,
            closable:true,
            items :[{xtype : 'usergrid'}],
            dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text:'Tambah',
                tooltip:'Tambah data',
                handler: showContactForm
            }, '-', {
                text:'Edit',
                tooltip:'Pilih data Terlebih dahulu'
            },'-',{
                itemId: 'removeButton',
                text:'Hapus',
                tooltip:'Remove the selected item',
            }]
        }]
            }).show();
        } else {
            YourTabPanel.add({
            title:tabTitle,
            id:yourTabId,
            closable:true,
            layout: 'fit'
            }).show();
        }
  }
  YourTabPanel.doLayout();
}

GridPanel SourceCode

var ctrPanel = Ext.getCmp('TabCenterPanel');
Ext.define('MY.grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.usergrid',
    title: 'Test Grid',
    layout : 'fit',
    store: Ext.data.StoreManager.lookup('datastore'),
    columns: [
        { header: 'Name',  dataIndex: 'name' },
        { header: 'Email', dataIndex: 'email', flex: 1 },
        { header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
    ]
});

[friend]

A couple of problems I see off the bat:

• You've declared layout: 'fit' on your grid definition. That does nothing and should be removed.
• You're adding a usergrid widget as a tab of YourTabPanel, where a child tab's layout defaults to 'fit' (if I remember correctly). You might try adding autoScroll: true to your usergrid widget to see if that corrects the issue.

[faliqulamin]

A couple of problems I see off the bat:

• You've declared layout: 'fit' on your grid definition. That does nothing and should be removed.
• You're adding a usergrid widget as a tab of YourTabPanel, where a child tab's layout defaults to 'fit' (if I remember correctly). You might try adding autoScroll: true to your usergrid widget to see if that corrects the issue.

thanks for your reply but it still does not work, but if i set my gridpanel with fixed height, scrollbar will appear, but if i use fixed height would be problematic if different monitor sizes.
is there any other suggestion?

[fschaeffer]

You're overnesting your panels.

Just add the tabPanel as your center-region and then add your grid as direct child of that tabPanel. You won't have to specify any layout-types at all...

{
  id : 'TabCenterPanel',
  xtype : 'panel',
  region : 'center',
  layout : 'fit',
  autoScroll: true,
  items:[mainTabPanel]
}

....
var mainTabPanel = new Ext.TabPanel({
        id:'mainTabPanel',
        region: 'center',
        activeTab: 0,
        items: [tab1]
});

could and should be rewritten to

{
            id : 'mainTabPanel',
            xtype : 'tabpanel',
            region : 'center',
            items:[tab1]
}

[faliqulamin]

You're overnesting your panels.

Just add the tabPanel as your center-region and then add your grid as direct child of that tabPanel. You won't have to specify any layout-types at all...

{
  id : 'TabCenterPanel',
  xtype : 'panel',
  region : 'center',
  layout : 'fit',
  autoScroll: true,
  items:[mainTabPanel]
}

....
var mainTabPanel = new Ext.TabPanel({
        id:'mainTabPanel',
        region: 'center',
        activeTab: 0,
        items: [tab1]
});

could and should be rewritten to

{
            id : 'mainTabPanel',
            xtype : 'tabpanel',
            region : 'center',
            items:[tab1]
}

Thanks fschaeffer

It worked. THANKS THANKS THANKS