Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-9583 in 4.2.1.883.
  1. #1
    Sencha User
    Join Date
    Sep 2012
    Location
    Jakarta, Indonesia
    Posts
    9
    Vote Rating
    0
    nogun is on a distinguished road

      0  

    Default window maximize problem on desktop (example from the package) with tbar

    window maximize problem on desktop (example from the package) with tbar


    I added a tbar in desktop (example from the package) but when the window is maximized, the tbar is behind the window.

    *EDIT BY SLEMMON
    Tested on 4.2 and 4.2.1.763

    Maximizing the child window with constrainHeader maximizes the window relative to the owning panel's el.
    Maximizing the child window with constrain maximizes the window relative to the owning panel's bodyEl.

    Code:
    var constrainedWin, constrainedWin2;                Ext.create('Ext.container.Viewport', {    layout: 'fit'    , items: [{        xtype: 'panel'        , dockedItems: [        {            dock: 'top',            xtype: 'toolbar',            height: 30,            items: [                {xtype:'tbtext', text:'Top Toolbar'}            ]        },        {            dock: 'bottom',            xtype: 'toolbar',            height: 30,            items: [                {xtype:'tbtext', text:'Bottom Toolbar'}            ]        }    ],    items: [        constrainedWin = Ext.create('Ext.window.Window', {            title: 'Window with constrainHeader',            width: 600,            height: 400,            x: 50,            y: 50,            constrainHeader: true,            maximizable: true,            html: 'This is a window with constrainHeader true'            , tbar: [{                text: 'Button'            }]        }),                constrainedWin2 = Ext.create('Ext.window.Window', {            title: 'Window with constrain',            width: 600,            height: 400,            constrain: true,            maximizable: true,            html: 'This is a window with constrain true'            , tbar: [{                text: 'Button'            }]        })    ]    }]});constrainedWin.show();constrainedWin2.show();
    Last edited by slemmon; 24 Apr 2013 at 9:40 AM. Reason: added additional test notes and inline test case

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,893
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Hard to say - should be some straight forward coding.
    Can you reproduce the issue you're seeing with just a simple code snippet of a window/toolbar?

  3. #3
    Sencha User
    Join Date
    Sep 2012
    Location
    Jakarta, Indonesia
    Posts
    9
    Vote Rating
    0
    nogun is on a distinguished road

      0  

    Default


    I just add this code

    me.tbar = new Ext.toolbar.Toolbar();

    to the initComponent function in the desktop.js file. When I open a window from start menu and maximize it, the top toolbar on the desktop covered by the window. This is not happen when I used the 4.1.1a GPL version.

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,893
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    Not sure why you're seeing that behavior just my modifying the desktop demo. I take it that if you make a stand-alone example of a window with a toolbar it's working ok for you?

  5. #5
    Sencha User
    Join Date
    Sep 2012
    Location
    Jakarta, Indonesia
    Posts
    9
    Vote Rating
    0
    nogun is on a distinguished road

      0  

    Default


    Please check this out. The window with constrainHeader set to true covering the top toolbar when maximized, but not the other window.

    Code:
    Ext.onReady(function(){
                
                    var constrainedWin, constrainedWin2;
                    
                    Ext.create('Ext.panel.Panel', {
                        width: '100%',
                        height: '100%',                    
                        renderTo: Ext.getBody(),
                        dockedItems: [
                            {
                                dock: 'top',
                                xtype: 'toolbar',
                                height: 30,
                                items: [
                                    {xtype:'tbtext', text:'Top Toolbar'}
                                ]
                            },
                            {
                                dock: 'bottom',
                                xtype: 'toolbar',
                                height: 30,
                                items: [
                                    {xtype:'tbtext', text:'Bottom Toolbar'}
                                ]
                            }
                        ],
                        items: [
                            constrainedWin = Ext.create('Ext.window.Window', {
                                title: 'Window with constrainHeader',
                                width: 600,
                                height: 400,
                                x: 50,
                                y: 50,
                                constrainHeader: true,
                                maximizable: true,
                                html: 'This is a window with constrainHeader true'
                            }),
                            
                            constrainedWin2 = Ext.create('Ext.window.Window', {
                                title: 'Window with constrain',
                                width: 600,
                                height: 400,
                                constrain: true,
                                maximizable: true,
                                html: 'This is a window with constrain true'
                            })
                        ]                            
                    });
                    
                    constrainedWin.show();
                    constrainedWin2.show();
                    
                });

  6. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,893
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    In your example the owning panel didn't honor the height of 100%.
    I modified the example somewhat to ensure the owning panel took up 100% of the screen real estate. Test with this and see if you still see an issue.

    Code:
    var constrainedWin, constrainedWin2;
                    
    Ext.create('Ext.container.Viewport', {
        layout: 'fit'
        , items: [{
            xtype: 'panel'
            , dockedItems: [
            {
                dock: 'top',
                xtype: 'toolbar',
                height: 30,
                items: [
                    {xtype:'tbtext', text:'Top Toolbar'}
                ]
            },
            {
                dock: 'bottom',
                xtype: 'toolbar',
                height: 30,
                items: [
                    {xtype:'tbtext', text:'Bottom Toolbar'}
                ]
            }
        ],
        items: [
            constrainedWin = Ext.create('Ext.window.Window', {
                title: 'Window with constrainHeader',
                width: 600,
                height: 400,
                x: 50,
                y: 50,
                constrainHeader: true,
                maximizable: true,
                html: 'This is a window with constrainHeader true'
            }),
            
            constrainedWin2 = Ext.create('Ext.window.Window', {
                title: 'Window with constrain',
                width: 600,
                height: 400,
                constrain: true,
                maximizable: true,
                html: 'This is a window with constrain true'
            })
        ]
        }]
    });
    
    
    constrainedWin.show();
    constrainedWin2.show();

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Location
    Jakarta, Indonesia
    Posts
    9
    Vote Rating
    0
    nogun is on a distinguished road

      0  

    Default


    I still see the same problem. Nothing change. FYI, I am using the 4.2.0 GPL version.

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Location
    Jakarta, Indonesia
    Posts
    9
    Vote Rating
    0
    nogun is on a distinguished road

      0  

    Default


    Yeay, I found a solution. I just add constrain:true config to the constrainedWin and the window can be maximized perfectly. But restoring position still not work perfectly when the window body is falling outside. But it's ok, it's not a big deal. Thanks for helping me. Please, let me know if you have solved this new issue.


    [update]
    the restoring position problem not just happened on constrainedWin, but also on constrainedWin2.

    Everything is ok when container has no tbar.
    Last edited by nogun; 17 Apr 2013 at 7:35 PM. Reason: update

  9. #9
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,893
    Vote Rating
    175
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    This code works for me on 4.2 on Chrome on OSX. I'm not seeing any issues when dragging the windows or when maximizing them.

    Code:
    var constrainedWin, constrainedWin2;
                    
    Ext.create('Ext.container.Viewport', {
        layout: 'fit'
        , items: [{
            xtype: 'panel'
            , dockedItems: [
            {
                dock: 'top',
                xtype: 'toolbar',
                height: 30,
                items: [
                    {xtype:'tbtext', text:'Top Toolbar'}
                ]
            },
            {
                dock: 'bottom',
                xtype: 'toolbar',
                height: 30,
                items: [
                    {xtype:'tbtext', text:'Bottom Toolbar'}
                ]
            }
        ],
        items: [
            constrainedWin = Ext.create('Ext.window.Window', {
                title: 'Window with constrainHeader',
                width: 600,
                height: 400,
                x: 50,
                y: 50,
                constrainHeader: true,
                maximizable: true,
                html: 'This is a window with constrainHeader true'
                , tbar: [{
                    text: 'Button'
                }]
            }),
            
            constrainedWin2 = Ext.create('Ext.window.Window', {
                title: 'Window with constrain',
                width: 600,
                height: 400,
                constrain: true,
                maximizable: true,
                html: 'This is a window with constrain true'
                , tbar: [{
                    text: 'Button'
                }]
            })
        ]
        }]
    });
    
    
    
    
    constrainedWin.show();
    constrainedWin2.show();

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2010
    Posts
    3
    Vote Rating
    0
    bkresoja is on a distinguished road

      0  

    Default


    I can confirm that this is a bug. In a given example in both firefox and chrome tollbars don't get calculated when constrainHeader is set to true and maximizing a window sets window on top of top toolbar even though it should never overleap.

    And not only that, maximize then minimize the window and window will be positioned higher (height of a bottom toolbar) that before maximization both on constrain and constrainHeader

Thread Participants: 2