PDA

View Full Version : [FIXED] window maximize problem on desktop (example from the package) with tbar



nogun
4 Apr 2013, 11:20 PM
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.




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();

slemmon
7 Apr 2013, 10:09 PM
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?

nogun
7 Apr 2013, 10:49 PM
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.

slemmon
8 Apr 2013, 6:20 AM
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?

nogun
17 Apr 2013, 9:07 AM
Please check this out. The window with constrainHeader set to true covering the top toolbar when maximized, but not the other window.



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();

});

slemmon
17 Apr 2013, 11:14 AM
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.



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();

nogun
17 Apr 2013, 6:12 PM
I still see the same problem. Nothing change. FYI, I am using the 4.2.0 GPL version.

nogun
17 Apr 2013, 7:05 PM
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.

slemmon
18 Apr 2013, 1:37 PM
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.



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();

bkresoja
24 Apr 2013, 2:44 AM
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

slemmon
24 Apr 2013, 9:40 AM
Thanks for the report! I have opened a bug in our bug tracker.