PDA

View Full Version : [FIXED] Window maximize behaviour



jurel
Apr 20, 2008, 9:36 AM
Hi,

I have found interesting behaviour behaviour of "cool:window" whne "Maximizable" propertiy is set to true.
Here is the code example:





<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CooliteTest._Default" %><%@ Register Assembly="Coolite.Web.UI" Namespace="Coolite.Web.UI" TagPrefix="cool" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>

<body scroll="no">
<form id="form1" runat="server">
<cool:ScriptManager runat="server" ID="CoolSC" Theme="Gray"/>
<table style="width:100%; height:100%;" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<cool:Window ID="Window1" runat="server"
AutoShow="true"
Collapsible="true"
Title="My Window"
TitleCollapse="false"
Shim="true"
AutoLoad=http://www.google.com (http://www.google.com/)
Maximizable="true"
Minimizable="true"
AutoScroll="true"
CloseAction="Hide"
Center="False">
</cool:Window>
</td>
</tr>
<tr style="height:30px; background-color: Black;">
<td>
<asp:Menu runat="server"
ID="GlobalMenu"
BackColor="Black"
Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="Menu1" />
<asp:MenuItem Text="Menu2" />
<asp:MenuItem Text="Menu3" />
<asp:MenuItem Text="Menu4" />
</Items>
</asp:Menu>
</td>
</tr>
</table>
</form>
</body>
</html>


Once maximize button is clicked the result is not quite wait is was expected. Instead window resize to container boundaries it just "minimizes" to top left corner of &#100;ocument. Any suggestion on this one. And of course keep up the good work.

Regards,
Jure

geoffrey.mcgill
Apr 21, 2008, 3:09 AM
Hi Jure,

This issue has been on my list of things to investigate for a while, some I'm glad you pointed out the problem.

I dug into the JavaScript and by default the Maximize event will maximize the Window to the size of it's container.

The default container for the Window is the <form> and by default the <form> renders basically no width/height, unless styled to fill it's container (<body>) with the height/width set to 100%.

I can't change the default functionality, although there is a fairly easy work-around, which also enables much more flexibility. By listening for the Maximize event we can get the size of the body and then resize the Window according to these new dimensions.

Example


<cool:Window
ID="Window1"
runat="server"
Title="Window"
Maximizable="true"
AutoShow="true"
Html="Maximize Me!">
<ClientEvents>
<Maximize Handler="function (el){ var view = Ext.getBody().getViewSize(); el.setSize(view.width, view.height); }" />
</ClientEvents>
</cool:Window>


For the upcoming 0.5 release, the above syntax will change slightly.

Example


<ext:Window
ID="Window1"
runat="server"
Title="Window"
Maximizable="true"
AutoShow="true"
Html="Maximize Me!">
<Listeners>
<Maximize Handler="function (el){ var view = Ext.getBody().getViewSize(); el.setSize(view.width, view.height); }" />
</Listeners>
</ext:Window>


I added the above Maximize handler to the Window control source code. This maximize/resize functionality is now the default behaviour, if the Maximizable property is set to "true".

This new functionality can be easily overridden by setting your own custom <Maximize> event handler.

If you wish to maximize the Window to size of a different container, just replace Ext.getBody() with another DOM object.

Example


var view = Ext.get("myDiv").getViewSize();

Hope this helps.

jurel
Apr 21, 2008, 9:32 AM
Thanx. That acctualy worked. I complettly forget about elements flow :S. BTW why don't allow "RenderTo" property to be settable. Acctualy it has setter but rendered script has always "new Ext.Window({renderTo:"form1" ...). Could be ever nicer solution.

geoffrey.mcgill
Apr 22, 2008, 3:25 AM
Hi jurel,

We force the Window to render to the <form> otherwise the contents of the Window are not sent in a postback.

Since the control must be placed inside the <form> and considering it does not participate in the normal 'flow' of the Page (i.e. it floats above everything), I feel rendering to the <form> is perfectly acceptable. Obviously that caused a bug, but I feel the code posted above, and now added to the source as default behaviour, should help solve any future issues.

Again, the positioning of the Window is completely customizable by tapping into the Render Listener or from any other event fired on the Page.

The option to override the RenderTo property is another item on my list to revisit and I'll make a point of giving it some attention before the final 0.5 release.

Hope this helps.