Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    Higgs.Boson is on a distinguished road

      0  

    Default Answered: vertical scrollbar in ExtJS GridPanel

    Answered: vertical scrollbar in ExtJS GridPanel


    I'm working on a project where I have a GridPanel on a page. The panel can display any number of rows. When the number of rows is too large, GridPanel doesn't display an vertical scrollbars. Here is the code:
    Code:
    Ext.onReady(function(){        var myData = [
                ['start'],['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'],
                ['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'],
                ['26'], ['27'], ['28'], ['29'], ['30'], ['31'], ['32'], ['33'], ['34'], ['35'], ['36'], ['end']
            ];
    
    
            var store = new Ext.data.ArrayStore({
                fields: [ {name: 'values'} ]
            });
    
    
            store.loadData(myData);
    
    
            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: [{ header: 'values', dataIndex: 'values'}]
            });
    
    
            new Ext.Viewport({
                padding:10,
                layout:'fit',
                items: [{
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Tab1',
                        items: [grid]
                    }]
                }],
                renderTo: Ext.getBody()
            });
    
            });


    Note, that the total number of rows greater than 36. In my window display only 29 rows:
    eng.jpg


  2. It depends on how you want to display Panel1 and grid. I'm assuming you are looking for something like this:

    Code:
            var grid = new Ext.grid.GridPanel({
                store: store,
                flex: 1,
                columns: [{ header: 'values', dataIndex: 'values'}]
            });
    
    
    
    
            new Ext.Viewport({
                padding:10,
                layout:'fit',
                items: [{
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Tab1',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [Panel1,grid]
                    }]
                }],
                renderTo: Ext.getBody()
            });

  3. #2
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    311
    Answers
    59
    Vote Rating
    51
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      2  

    Default


    Try adding layout: 'fit' to the Tab 1 component.

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    Higgs.Boson is on a distinguished road

      0  

    Default


    Yes, it's work. But I was wrong. I simplified example, and deleted from it all complex chunks of code. In my version it doesn't work. My complex code:
    Code:
     Ext.onReady(function(){
            var myData = [
                ['start'],['1'], ['2'], ['3'], ['4'], ['5'], ['6'], ['7'], ['8'], ['9'], ['10'], ['11'], ['12'], ['13'],
                ['14'], ['15'], ['16'], ['17'], ['18'], ['19'], ['20'], ['21'], ['22'], ['23'], ['24'], ['25'],
                ['26'], ['27'], ['28'], ['29'], ['30'], ['31'], ['32'], ['33'], ['34'], ['35'], ['36'], ['end']
            ];
    
    
            var store = new Ext.data.ArrayStore({
                fields: [ {name: 'values'} ]
            });
    
    
            store.loadData(myData);
            var Panel1 = new Ext.Panel({
                tbar: {
                    items: [{  xtype: 'button', text: 'Add' }, {xtype: 'button',text: 'New Message'}]
                }
            });
            var grid = new Ext.grid.GridPanel({
                store: store,
                columns: [{ header: 'values', dataIndex: 'values'}]
            });
    
    
            new Ext.Viewport({
                padding:10,
                layout:'fit',
                items: [{
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Tab1',
                        items: [Panel1,grid]
                    }]
                }],
                renderTo: Ext.getBody()
            });
            });
    Help me please in that version of code

  5. #4
    Touch Premium Member
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    311
    Answers
    59
    Vote Rating
    51
    droessner is a jewel in the rough droessner is a jewel in the rough droessner is a jewel in the rough

      1  

    Default


    It depends on how you want to display Panel1 and grid. I'm assuming you are looking for something like this:

    Code:
            var grid = new Ext.grid.GridPanel({
                store: store,
                flex: 1,
                columns: [{ header: 'values', dataIndex: 'values'}]
            });
    
    
    
    
            new Ext.Viewport({
                padding:10,
                layout:'fit',
                items: [{
                    xtype: 'tabpanel',
                    items: [{
                        title: 'Tab1',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        items: [Panel1,grid]
                    }]
                }],
                renderTo: Ext.getBody()
            });

  6. #5
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    Higgs.Boson is on a distinguished road

      0  

    Default


    It is work!!! Thank you very much!!!!!

Thread Participants: 1

Tags for this Thread