View Full Version : unwanted horizontal scrollbars in grid + hideHeaders in west region of viewport

25 Oct 2010, 5:20 PM

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?



<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<style type="text/css">
html, body {
font:normal 11px tahoma, arial, helvetica, sans-serif;
border:0 none;

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

<script type="text/javascript">

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',
items: [
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 300,
minSize: 200,
maxSize: 400,
collapseMode: 'mini',
margins: '5 0 0 5',
layout: 'fit',
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',
margins: '5 5 5 0'

1 Nov 2010, 6:39 PM

2 Nov 2010, 1:32 AM
Tested Firefox and Chrome, but I don't get a scrollbar.

- 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).

2 Nov 2010, 3:57 PM

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.

2 Nov 2010, 11:33 PM
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).