You found a bug! We've classified it as EXTJS-9704 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    11
    Vote Rating
    0
    setha is on a distinguished road

      0  

    Default window resize event stops firing after restore

    window resize event stops firing after restore


    A window with no height set, containing fieldsets, will shrink and grow vertically when the fieldsets are collapsed and expanded. If the window is maximized and then restored, the height becomes fixed, it no longer changes vertically when the fieldset expands. I noticed that the resize event stops firing after the restore but assume that is only a symptom. How can I keep the automatic vertical sizing? Is this a bug?

    Here is some sample code based on the window example:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1">
        <title>WindowsExample</title>
        <link rel="stylesheet"type="text/css" href="../ext/resources/css/ext-all.css"/>
        <link rel="stylesheet"type="text/css" href="../ext/examples/shared/example.css"/>
    
    
        <!-- GC -->
    
    
        <script type="text/javascript"src="../ext/ext-all-debug.js"></script>
        <script language="javascript"src="window2.js"></script>
        <style type="text/css">
            .x-panel-body p {
                margin: 10px;
                font-size: 12px;
            }
        </style>
    </head>
    <body>
    <!-- EXAMPLES -->
    <h1>Windows Example</h1>
    <input type="button"id="show-btn" value="Open Window"/><br/><br/>
    </body>
    </html>
    Code:
    Ext.require([ 'Ext.window.Window' ]);
    
    Ext.onReady(function(){
        var button = Ext.get('show-btn');
    
        button.on('click', function(){    makeWin(); });
    
        function makeWin() {
            var set1 =Ext.create('Ext.form.FieldSet', {
                title: 'Upper',
                id: 'upper-set',
                xtype:'fieldset',
                layout: {
                    type: 'table',
                    columns: 2 
                },
                collapsed: false,
                collapsible: true,
                forceLayout: true,
                checkboxToggle:false,
                items : [
                    { html: 'Upper Date' },
                    { xtype: 'datefield' },
                    { html: 'Upper Text' },
                    { xtype: 'textfield' }
                ]
            }); 
    
            var set2 =Ext.create('Ext.form.FieldSet', {
                title: 'Lower',
                id: 'lower-set',
                xtype:'fieldset',
                layout: {
                    type: 'table',
                    columns: 2 
                },
                collapsed: true,
                collapsible: true,
                forceLayout: true,
                checkboxToggle:false,
                items : [
                    { html: 'Lower Date' },
                    { xtype: 'datefield' },
                    { html: 'Lower Text' },
                    { xtype: 'textfield' }
                ]
            }); 
    
            var win = Ext.create('Ext.Window', {
                title: 'Test',
                width: 300,
                x: 200,
                y: 400,
                plain: true,
                layout : {
                    type: 'vbox',
                    align: 'stretch'
                },
                maximizable: true,
                closable: true,
                closeAction: 'destroy',
                items: [ set1, set2 ],
                listeners: {
                    'show': function(win) {
                        var x = 1;
                    },
                    'resize': function(win, width,height, eOpts ) {
                        var x = 1;
                    }
                }
            }).show();
        }
    });


    *EDIT BY SLEMMON
    tested in 4.1.1, 4.1.3, 4.2, 4.2.1.803
    also tested with layout: 'anchor'
    inline test case:
    Code:
    var set1 =Ext.create('Ext.form.FieldSet', {
        title: 'Upper',
        id: 'upper-set',
        xtype:'fieldset',
        layout: {
            type: 'table',
            columns: 2 
        },
        collapsed: false,
        collapsible: true,
        forceLayout: true,
        checkboxToggle:false,
        items : [
            { html: 'Upper Date' },
            { xtype: 'datefield' },
            { html: 'Upper Text' },
            { xtype: 'textfield' }
        ]
    }); 
    
    
    var set2 =Ext.create('Ext.form.FieldSet', {
        title: 'Lower',
        id: 'lower-set',
        xtype:'fieldset',
        layout: {
            type: 'table',
            columns: 2 
        },
        collapsed: true,
        collapsible: true,
        forceLayout: true,
        checkboxToggle:false,
        items : [
            { html: 'Lower Date' },
            { xtype: 'datefield' },
            { html: 'Lower Text' },
            { xtype: 'textfield' }
        ]
    }); 
    
    
    var win = Ext.create('Ext.Window', {
        title: 'Test',
        width: 300,
        x: 200,
        y: 400,
        plain: true,
        layout : {
            type: 'vbox',
            align: 'stretch'
        },
        maximizable: true,
        closable: true,
        closeAction: 'destroy',
        items: [ set1, set2 ],
        listeners: {
            'show': function(win) {
                var x = 1;
            },
            'resize': function(win, width,height, eOpts ) {
                var x = 1;
            }
        }
    }).show();
    Last edited by slemmon; 3 May 2013 at 7:04 PM. Reason: additional test notes and inline test case

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,343
    Vote Rating
    197
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    11
    Vote Rating
    0
    setha is on a distinguished road

      0  

    Default


    I'd like to mention another thing that I've noticed with maximize/restore. I'm in the process of porting code from ext-3.1.0 to the lastest 4.x version. With the old code, if I maximize a window containing collapsed fieldsets and then expand a fieldset, the height of the window when it is restored is big enough to show the expanded fieldset. In ext-4.2.0.663, the restored window does not resize but has the original height and hides the expanded fieldset. I don't know if this is another manifestation of the same bug or something different.

Thread Participants: 1