Results 1 to 5 of 5

Thread: Grid not showing horizontal scroll bar

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
      0  

    Default 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
    36
    Vote Rating
    1
      0  

    Default

    Iulian,

    Can you include code snipped for us to look at?

    Thanks,
    -M

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
      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
    36
    Vote Rating
    1
      0  

    Default

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

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    62
    Vote Rating
    0
      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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •