[4.1] Window with vbox layout causes failure with fixed height items AND toolbar

**jmaia** · 8 May 2012 3:27 AM

REQUIRED INFORMATION

Ext version tested:

Ext 4.1

Browser versions tested against:

Firefox 12
Google Chrome 18
IE 9

DOCTYPE tested against:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Description:

When I do show() on a Window (Ext.window.Window) that has a vbox layout and dockedItems (a toolbar), if any of the window's items has a fixed height, the layout fails. If the items have flex settings it works.

Steps to reproduce the problem:

Create a window with layout: { type: 'vbox', align: 'strecth', pack:'start'}, with toolbar as a docked item, and with at least one item with fixed height
Call show() on that window

The result that was expected:

Window is displayed without any problems

The result that occurs instead:

Calling show, causes a layout failure, and the window is displayed without the correct layout

Test Case:

Code:

    <html>
<head>
    <title>The mysterious case of the f*cked up window</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4/resources/css/ext-all.css" type="text/css">        
    <script type="text/javascript" src="ext-4/ext-all-debug.js"></script>            
    <script type="text/javascript">
        Ext.Loader.setConfig({
            enabled: true            
        });


        Ext.onReady(function () {
            Ext.require('Ext.*');
            
            var wnd = Ext.widget('window', {
                title: 'The mysterious case of the f*cked up window',
                layout: {
                    type: 'vbox',
                    align: 'stretch',
                    pack: 'start'
                },
                plain: true,
                modal: true,
                resizable: false,
                displayCancel: true,
                draggable: true,
                maximizable: true,
                closable: true,
                width: 400,
                height: 500,


                dockedItems: [{
                    xtype: 'toolbar',
                    dock: 'bottom',
                    ui: 'footer',
                    layout: {
                        pack: 'end'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Ok',
                        minWidth: 80
                    },
                    {
                        xtype: 'button',
                        text: 'Cancel',
                        minWidth: 80
                    }]
                }],
                
                items: [{
                    xtype: 'fieldset',
                    margins: '5 5 5 5',
                    height: 100, // NOTE: this fails. If I comment this line and uncomment the following one, it works. If I remove the docked items and leave this line uncommented, it works as well
                    //flex: 0.3,
                    title: 'HELLO'
                },
                {
                    xtype: 'fieldset',
                    margins: '0 5 0 5',
                    title: 'HELLO AGAIN',
                    flex: 1
                }]                
            });


            Ext.widget('button', {
                text: 'hit me',
                renderTo: 'test',
                listeners: {
                    click: function () { wnd.show(); }
                }
            });
        });
    </script>
</head>
<body>
<div id='test'></div>
</body>
</html>

HELPFUL INFORMATION

Screenshot or Video:

not provided

See this URL for live test case: http://

Debugging already done:

If I have one of the fieldsets on the testcase with height: 100, it fails, if I have the toolbar
If I change that fieldset to flex: 0.3 instead of height: 100, it works, even if I have the toolbar
If I remove the toolbar, it works with flex: 0.3 or with height: 100

Possible fix:

not provided

Additional CSS used:

only default ext-all.css
custom css (include details)

Operating System:

Windows 7 Pro (64)

**evant** · 8 May 2012 5:09 AM

Thanks for the report. I'm pretty sure it will be resolved when EXTJSIV-5990 is merged in, I just tested the same fix on your test case and it ran without any failure. Will let you know when it's available in the nightlies.

**jmaia** · 8 May 2012 5:11 AM

Originally Posted by evant

Thanks for the report. I'm pretty sure it will be resolved when EXTJSIV-5990 is merged in, I just tested the same fix on your test case and it ran without any failure. Will let you know when it's available in the nightlies.

Ok, thanks.

jm

[4.1] Window with vbox layout causes failure with fixed height items AND toolbar

Thread Tools

Search Thread

Display

[4.1] Window with vbox layout causes failure with fixed height items AND toolbar

[4.1] Window with vbox layout causes failure with fixed height items AND toolbar