Results 1 to 3 of 3

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

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Vote Rating

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

    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


    • Trying to use a multi-spaced VBox layout as per the example at 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:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        <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'
    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 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:

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

  2. #2
    Ext JS Premium Member anselmtmcclain's Avatar
    Join Date
    Mar 2008
    Northern California
    Vote Rating


    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

  3. #3
    Ext JS Premium Member sumit.madan's Avatar
    Join Date
    May 2009
    Bangalore, India
    Vote Rating


    This bug still exists in ExtJS 3.4

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

Similar Threads

  1. Replies: 8
    Last Post: 5 Jan 2011, 2:00 PM
  2. Replies: 4
    Last Post: 25 Dec 2009, 4:23 PM
  3. Combobox not render correctly when i open up two tabs
    By g_papasavva in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 5 Oct 2009, 5:55 AM
  4. Replies: 4
    Last Post: 14 Aug 2008, 1:51 AM
  5. Multi Column Panel don't render correctly in IE7
    By chernomorez in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 4 Apr 2008, 7:45 AM

Posting Permissions

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