1. #1
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    mpf is on a distinguished road

      0  

    Exclamation unwanted horizontal scrollbars in grid + hideHeaders in west region of viewport

    unwanted horizontal scrollbars in grid + hideHeaders in west region of viewport


    Hi,

    I am having an issue with updating an application to Ext 3.3.0 (was ok with Ext 3.0.x, 3.1.x and 3.2.x). In the test code below the grid in the west panel should show just two columns without the need for any scrollbars. This is how it behaved in earlier versions.

    In Ext 3.3.0, on page load the grid is initially rendered with horizontal scrollbars. Resizing the browser window causes the scrollbar to disappear. Commenting out 'hideHeaders: true' also makes the grid render properly except for the unwanted column headers.

    In my own application I see this issue in Firefox 3.6.11, Chrome 7.0.517.41 beta and IE8. In reducing it to the simple test case below I was only able to get the issue to occur in Firefox.

    Is this a bug or am I doing something wrong?

    regards

    Matthew

    PHP Code:
    <html>
    <
    head>
      <
    title>Complex Layout</title>
        <
    link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        
        <
    style type="text/css">
        
    htmlbody {
            
    font:normal 11px tahomaarialhelveticasans-serif;
            
    margin:0;
            
    padding:0;
            
    border:0 none;
            
    overflow:hidden;
            
    height:100%;
        }
        </
    style>

        <
    script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>

        <script type="text/javascript">
        Ext.onReady(function(){
        

            var store = new Ext.data.ArrayStore({
                fields: ['name', 'value'],
                data: [
                    ['Name', 'John Doe'],
                    ['Email', 'John.Doe@example.com'],
                    ['Address', ' 1 Main Street']
                ]
            });

            var viewport = new Ext.Viewport({
                layout: 'border',
                id:'vp',
                items: [
                {
                    xtype:'grid',
                    region: 'west',
                    id: 'west-panel',
                    title: 'West',
                    split: true,
                    width: 300,
                    minSize: 200,
                    maxSize: 400,
                    collapseMode: 'mini',
                    margins: '5 0 0 5',
                    layout: 'fit',
                    store:store,
                    hideHeaders: true, // uncomment this line to demo bug
                    autoExpandColumn: 'value',
                    columns: [
                        {id:'name', header:'Name', dataIndex:'name'},
                        {id:'value', header:'Value', dataIndex:'value'}
                    ],
                    autoScroll: true,
                    autoHeight: true
                }, {
                    region: 'center',
                    title:'center',
                    margins: '5 5 5 0'
                }]
            });
        });
        </script>
    </head>
    <body></body>
    </html> 

  2. #2
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    mpf is on a distinguished road

      0  

    Default


    anyone?

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Tested Firefox and Chrome, but I don't get a scrollbar.

    Notes:
    - That css rule is not needed. Ext.Viewport will apply the same styles.
    - Remove layout:'fit' and autoScroll:true (not applicable to a grid).
    - Remove autoHeight:true (border layout will set height).

  4. #4
    Ext User
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    mpf is on a distinguished road

      0  

    Default


    Hi,

    Thanks. Removing the css rule fixed the issue for me. The test case I've given is a cut down version of the complex layout example that comes with Ext. You might want to remove the css from that too.

    I kept autoheight because I want the grid to only be as high as the number of rows it contains and not take up the full height of the west region.

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Quote Originally Posted by mpf View Post
    I kept autoheight because I want the grid to only be as high as the number of rows it contains and not take up the full height of the west region.
    The grid IS the west region, so it should always be full height. Making the grid autoHeight:true also disables the scrollbar (if required).

Similar Threads

  1. Add TabPanel to west region of viewport
    By rnankani in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 11 Jun 2009, 7:58 AM
  2. unwanted Window scrollbars in FF2
    By mjlecomte in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 20 Aug 2008, 11:50 AM
  3. trying to have all accordion items collapsed when in viewport west region
    By jonesmc123 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 8 Jan 2008, 6:52 AM
  4. viewport-west region, collapsed with title
    By ec-cts in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Dec 2007, 2:55 AM

Thread Participants: 1

Tags for this Thread