1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
    iulian is on a distinguished road

      0  

    Default Grid not showing horizontal scroll bar

    Grid not showing horizontal scroll bar


    Hi,

    I'm rendering a grid in a tab panel. I'm not setting any height on the grid, but it does get height set (not sure where this is happening). The problem it's that is not setting it correctly as I'm not able to see the horizontal scroll bar even though it is there. Anyone ran into this issue before?

    Thanks,
    Iulian
    Iulian

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Location
    Colorado Springs, CO
    Posts
    33
    Vote Rating
    1
    michaelbdavid is on a distinguished road

      0  

    Default


    Iulian,

    Can you include code snipped for us to look at?

    Thanks,
    -M

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
    iulian is on a distinguished road

      0  

    Default


    Thanks for checking this.

    Please download the attached file into a examples/grid directory. There's a grid loaded on the page with 50 rows and 30 columns. You will see all 50 rows but you'll not see all 30 columns. Also, there is no scroll bar.

    I'm open to any alternatives.

    Seems like I cannot attach a HTML file so I'm copying it here:

    HTML Code:
    <html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>ListView Example</title>    <link rel="stylesheet" type="text/css" href="../shared/example.css" />    <script type="text/javascript" src="../../examples/shared/include-ext.js"></script>    <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
        <!-- GC -->    <script type="text/javascript">    Ext.onReady(function(){        var data = [],            columns = [],            fields = [],            i, j, row;                    for (i = 0; i < 50; i++) {            data.push(row = {});            for (j = 0; j < 30; j++) {                row['column' + j] = 'Row ' + i + ', Column ' + j;            }        }                for (j = 0; j < 30; j++) {            columns.push({                text: 'Column ' + j,                dataIndex: 'column' + j,                width: 150            });            fields.push('column' + j);        }
            var grid = new Ext.grid.Panel({            title: 'Test Grid',            width: 1000,            columns: columns,            store: new Ext.data.Store({                fields: fields,                data: {                    records: data                },                proxy: {                    type: 'memory',                    reader: {                        type: 'json',                        root: 'records'                    }                }            }),            renderTo: document.body        });    });    </script></head><body>    <h1>Grid Example</h1></body></html>
    Iulian
    Iulian

  4. #4
    Sencha User
    Join Date
    Jul 2009
    Location
    Colorado Springs, CO
    Posts
    33
    Vote Rating
    1
    michaelbdavid is on a distinguished road

      0  

    Default


    Try setting height: '100%' should fix your issue.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
    iulian is on a distinguished road

      0  

    Default


    Indeed, it's working. Please see the new version I copied below. This renders the grid inside a Viewport. In this case, setting height to 100% in the grid is not working. This is more closer to my case, where I have the Viewport, then I have another panel which contains a TabPanel, the owner of the grid. In this case it's still not showing the scroll bar.

    Thanks,
    Iulian

    HTML Code:
    <html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>ListView Example</title>    <link rel="stylesheet" type="text/css" href="../shared/example.css" />    <script type="text/javascript" src="../../examples/shared/include-ext.js"></script>    <script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
        <!-- GC -->    <script type="text/javascript">    Ext.onReady(function(){        var data = [],            columns = [],            fields = [],            i, j, row;                    for (i = 0; i < 50; i++) {            data.push(row = {});            for (j = 0; j < 30; j++) {                row['column' + j] = 'Row ' + i + ', Column ' + j;            }        }                for (j = 0; j < 30; j++) {            columns.push({                text: 'Column ' + j,                dataIndex: 'column' + j,                width: 150            });            fields.push('column' + j);        }
            var grid = new Ext.grid.Panel({            title: 'Test Grid',            width: 1000,            height: '100%',            columns: columns,            store: new Ext.data.Store({                fields: fields,                data: {                    records: data                },                proxy: {                    type: 'memory',                    reader: {                        type: 'json',                        root: 'records'                    }                }            })        });                var viewport = new Ext.container.Viewport({            items: [grid]        });    });    </script></head><body>    <h1>Grid Example</h1></body></html>
    Iulian

Thread Participants: 1

Tags for this Thread