1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Bandung, Indonesia
    Posts
    12
    Vote Rating
    0
    faliqulamin is on a distinguished road

      0  

    Default Answered: Scrollbar does not appear in Gridpanel

    Answered: Scrollbar does not appear in Gridpanel


    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
    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',
                                                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

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

    Code:
    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' }
        ]
    });


  2. 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...

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

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

  3. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    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.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Bandung, Indonesia
    Posts
    12
    Vote Rating
    0
    faliqulamin is on a distinguished road

      0  

    Default


    Quote Originally Posted by friend View Post
    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?

  5. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Location
    Germany, Berlin
    Posts
    135
    Answers
    21
    Vote Rating
    11
    fschaeffer will become famous soon enough

      1  

    Default


    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...

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

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

  6. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    Bandung, Indonesia
    Posts
    12
    Vote Rating
    0
    faliqulamin is on a distinguished road

      0  

    Default


    Quote Originally Posted by fschaeffer View Post
    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...

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

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

    Thanks fschaeffer

    It worked. THANKS THANKS THANKS

Thread Participants: 2