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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi