PDA

View Full Version : Window Maximized, Resizable Elements Disabled



hhanna
27 Jan 2010, 1:50 PM
What's happening: With a window maximized, any contained resizable elements do not show their resize handles.

My Expectation: When a window is maximized, the window can no longer be resized, but I'd expect its contained resizable elements to remain active.

Here is an example of the code. Try to resize the contained div.



Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
var presentation = new Ext.Window({
layout: 'border',
id: 'presentation_window',
maximizable: true,
minHeight: 150,
minWidth: 200,
maximized: true,
items:
[{
region: 'center'
,id: 'center_region'
,margins: '5'
,html: '<div id="resizeMe" style="background-color: #FFFF00;">Please help figure out how to resize me</div>'
,listeners: {
afterRender: {
fn: function (p) {
var el = Ext.getDom('resizeMe');
el.resizer = new Ext.Resizable(el.id, {
handles: 'all'
,minWidth: 100
,minHeight: 100
,maxWidth: 500
,maxHeight: 500
,dynamic: true
,enabled: true
})
}
}
}
}]
}) // eo window
presentation.show();
}); //end onReady
IMO An unacceptable solution is to override the css of the resize handles:


.x-resizable-handle {
display: block !important;
opacity: 1 !important;
}
But that would require some additional coding to reapply the mouseover/mouseout listeners to perform the show/hide styling that the handles should follow inherently.

Does any one have an idea of how to configure the window or the child elements to allow resize handles to function with the window maximized? Any help is appreciated.

hhanna
29 Jan 2010, 6:47 AM
Please don't leave me hanging...

I saw a post about something similar, but that poster switched to using a viewport--I know a viewport with resizables is operable because I've used it before. The project I'm on requires use of a window.

I've reviewed the ext code, searched the forums, and tried all options I could think up. I'm at an impasse and could use some suggestions.

polinux
29 Jan 2010, 7:07 AM
This code seem to work fine :

Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';
var presentation = new Ext.Window({
layout: 'border',
id: 'presentation_window',
maximizable: true,
minHeight: 150,
minWidth: 200,
height: 150,
width: 200,
// maximized: true,
items:
[{
region: 'center'
,id: 'center_region'
,margins: '5'
,html: '<div id="resizeMe" style="background-color: #FFFF00;">Please help figure out how to resize me</div>'
,listeners: {
afterRender: {
fn: function (p) {
var el = Ext.getDom('resizeMe');
el.resizer = new Ext.Resizable(el.id, {
handles: 'all'
,minWidth: 100
,minHeight: 100
,maxWidth: 500
,maxHeight: 500
,dynamic: true
,enabled: true
})
}
}
}
}]
}) // eo window
presentation.show();

presentation.maximize();

}); //end onReady

Don't ask me why.

hhanna
29 Jan 2010, 8:03 AM
polinux, thank you for taking the time to review/test/respond. You got my hopes up.

I tried your code but do not see your results. Maybe I'm assuming results you aren't getting. When you write, "This code seem to work fine" I assume the following:


The window is maximized.
With window maximized, the resizable handles become visible on mouseover.
With window maximized, dragging the handles resizes the object.

Is that right? If so, which platform & browser are you running? I've tested the code on FF3.5.7, Chrome3, IE7 for Windows, and FF3.5.5, Safari 4 for Mac. All give me the same result--no resizable.

The window's css for the resizable handles appears to override the child resizable handles so the child resizable handles are not displayed. See the attached image.

polinux
29 Jan 2010, 9:49 AM
I didn't understand your real problem.

In fact I got the same : the resizer never appear on the div, and the div is resizable only if the window is not maximized.

I'll try to find why.

hhanna
29 Jan 2010, 12:06 PM
Again, I appreciate you having giving some of your time on my behalf.

There is such an expanse of knowledge out there among the community: I really wish more members would kindly weigh in.