[OPEN-1384] ComboBoxes Don't Render Correctly In VBox

**skirtle** · 28 Oct 2010 8:58 AM

Ext version tested:

Ext 3.2.1 - works fine
Ext 3.3.0 - does not work as expected

Adapter used:

ext

css used:

only default ext-all.css

Browser versions tested against:

IE7
FF3.6.11
Google Chrome 7.0.517.41

Operating System:

Ubuntu 10.04
WinXP Pro

Description:

Trying to use a multi-spaced VBox layout as per the example at http://dev.sencha.com/deploy/dev/exa...yout/vbox.html. Using Buttons this works fine but with ComboBoxes it doesn't: they are spaced out by at least 90 pixels per ComboBox, so unless the container is very tall the ComboBoxes run off the end. This used to work fine in Ext 3.2.1 but not 3.3.0.

Test Case:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>VBox/ComboBox Example</title>

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

    <script type="text/javascript" src="ext-base-3.3.0.js"></script>
    <script type="text/javascript" src="ext-all-3.3.0.js"></script>
 
    <script type="text/javascript">
        Ext.onReady(function() {
            new Ext.Viewport({
                items: [
                    {
                        mode: 'local',
                        store: ['UK', 'US'],
                        triggerAction: 'all',
                        value: 'UK',
                        xtype: 'combo'
                    },
                    {xtype: 'spacer', flex: 1},
                    {
                        mode: 'local',
                        store: ['Sat', 'Sun'],
                        triggerAction: 'all',
                        value: 'Sun',
                        xtype: 'combo'
                    },
                    {xtype: 'spacer', flex: 1},
                    {
                        mode: 'local',
                        store: ['Red', 'Green'],
                        triggerAction: 'all',
                        value: 'Red',
                        xtype: 'combo'
                    }
                ],
                layout: {
                    align: 'left',
                    type: 'vbox'
                }
            });

        });
    </script>
</head>
<body>

</body>
</html>

Steps to reproduce the problem:

The code above will create 3 ComboBoxes spaced vertically within an Ext.Viewport. Resize the browser window vertically to 'fit' the ComboBoxes and it should be obvious what the problem is: the ComboBoxes won't get closer together than 90 pixels. In a more realistic scenario, the same problem can also be seen inside an Ext.Window.

A closely related rendering oddity occurs if the browser window is already 'small' when the page is loaded. In that scenario the ComboBoxes just render on top of each other until the browser is resized.

The result that was expected:

As the browser window is shrunk vertically the ComboBoxes should get closer together until they are touching.

The result that occurs instead:

Once the browser window is shrunk below about 300 pixels the ComboBoxes don't get any closer together and run off the end.

Debugging already done:

Similar to http://www.sencha.com/forum/showthread.php?95986. The problem seems to be that ComboBox defines a minHeight property of 90 which collides with a property used by VBoxLayout in calculateChildBoxes. I can't find any documentation on what VBoxLayout uses minHeight for but I can make an educated guess. Whatever its use, I don't think it's the same way that ComboBox uses it.

The consequence in calculateChildBoxes is that minimumHeight ends up being much bigger than it should be. This in turn leads to tooNarrow being true when it should be false and then the heights of the boxes all get changed from 22 to 90.

Possible fix:

As a workaround I've set:

Code:

Ext.form.ComboBox.prototype.minHeight = 22;

but this obviously isn't a fix. As far as I can tell it just needs ComboBox and VBoxLayout to use different names for what they both currently call 'minHeight'.

**anselmtmcclain** · 2 Nov 2010 11:49 AM

Great post - thanks very much. Just spent an hour banging my head against the same problem until I finally figured out it was limited to comboboxes and was able to find this post via search.

I have exactly the same issue and agree 100% with this bug report.

Thanks - ATM

**sumit.madan** · 19 Aug 2011 1:50 PM

This bug still exists in ExtJS 3.4

@Sencha team, is anyone fixing bugs for ExtJS 3?

[OPEN-1384] ComboBoxes Don't Render Correctly In VBox

Thread Tools

Search Thread

Display

[OPEN-1384] ComboBoxes Don't Render Correctly In VBox

[OPEN-1384] ComboBoxes Don't Render Correctly In VBox

Similar Threads

[OPEN-1222][3.3 beta2] Pivot leftAxis does not render correctly

[UNKNOWN][3.1] Tab panels don't render correctly with FireFox Zoom

Combobox not render correctly when i open up two tabs

[SOLVED] [2.2] TabPanel / FormPanel column layout don't correctly render in IE6

Multi Column Panel don't render correctly in IE7