PDA

View Full Version : Click window border resize then hang cannot click buttons inside the window but can click "close" button


josephmkchan
Jan 25, 2021, 12:27 AM
Hi support,

I am not sure it is a system bug or my program bug that if click the window border to resize then it hang cannot click buttons inside that window but can click "close" button.

Also, how to clear "reset" the window setting (clear cache maybe?) that everytime I click the button to open a window? I tried to use the window.load() and window.clearContent() after adding listener show and hide event on the button, but seems not work? Or I used wrong methods?

And, not sure also due to these 2 event, when type this page Home.aspx on the browser and then it also load to "InboundTracker.aspx" (seems only click the button to open a new window)

Here is my code of these 3 questions, also i attached the image of what click window border resize



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
override protected void OnInit(EventArgs e)
{
//base.OnInit(e);

}


protected void Page_Load(object sender, EventArgs e)
{
Window win = new Window()
{
ID = "InboundWin",
Title = "Inbound Tracker Main Page",
Modal = true,
AutoRender = false,
Maximized=true,
Layout = "fit",

Loader = new ComponentLoader
{
Url = "InboundTracker_Win2.aspx",
Mode = LoadMode.Frame, //Frame
DisableCaching = true,
LoadMask =
{
ShowMask = true
}
}

};

this.Form.Controls.Add(win);

Window winLogon = new Window()
{
ID = "LogonWindow1",
Title = "Logon",
Width = Unit.Pixel(500),
Height = Unit.Pixel(500),
Modal = true,
AutoRender = false,
Collapsible = true,
Maximizable = true,
Hidden = true,

Loader = new ComponentLoader
{
Url = "Logon.aspx",
Mode = LoadMode.Frame, //Data
DisableCaching = true,
LoadMask =
{
ShowMask = true
}
}
};

this.Form.Controls.Add(winLogon);

}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>eZConnect</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<style>
.my-scale .x-btn-inner {
line-height: 48px;
padding-top: 48px;
}

.my-scale .x-btn-icon-el {
background-size: 56px;
height:56px;
width:56px;
}

.my-scale {
background-color : #005D62;
border-color : #005D62;
height:60px;

}
.x-over {
background-color : #C3D500;
border-color : #005D62;
}
.x-button-pressed {
background-color : #729748 !important;
border-color : #005D62;
}

.x-window-header,
.x-window-tc, .x-window-tr, .x-window-tl,
.x-window-ml, .x-window-mr,
.x-window-bc, .x-window-br, .x-window-bl, .x-window-frame,
.x-window-border
{
background-color: #005D62;
margin:0px,0px,0px,0px;
padding:0px,0px,0px,0px;
box-shadow: rgba(0,0,0,0) 0px 0px 0px;

}


</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#005D62" width="100%">
<tr>
<td>
<ext:Image runat="server" ImageUrl="Images/ezconnect_big_logo.jpg" Width="298" Height="65" Resizable="false" />
</td>

<td>
<ext:Button runat="server" Text="News Annoucement" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/news.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Inbound Tracker" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/inboundtracker.png">
<Listeners>
<Click Handler="#{InboundWin}.show(this);"/>
<Show Handler="#{InboundWin}.load();" />
<Hide Handler="#{InboundWin}.clearContent();" />
25497

</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Product List" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/productrelease.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Incident Log" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/incidentlog.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>

</td>

<td width="850" align="right">


<ext:Button runat="server" Text="Logon" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/logon.png">
<Listeners>
<Click Handler="#{LogonWindow1}.show(this);" />
</Listeners>
</ext:Button>
</td>
</tr>
</table>
<ext:Image runat="server" ImageUrl="Images/firstpage1.jpg" Width="920" Height="520"/>


</form>
</body>
</html>



25497
josephmkchan
Jan 28, 2021, 2:34 AM
Hi support,

I have fixed by the workaround method, click the page to forward that URL instead of opening by ext.window method, here is the code for reference, thanks for the attention anyway!



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{

/* comment this method
Window win = new Window()
{
ID = "InboundWin",
Title = "Inbound Tracker Main Page",
Modal = true,
AutoRender = false,
Maximized=true,
Layout = "fit",

Loader = new ComponentLoader
{
Url = "InboundTracker_Win2.aspx",
Mode = LoadMode.Frame, //Frame
DisableCaching = true,
LoadMask =
{
ShowMask = true
}
}

};

this.Form.Controls.Add(win);

Window winLogon = new Window()
{
ID = "LogonWindow1",
Title = "Logon",
Width = Unit.Pixel(500),
Height = Unit.Pixel(500),
Modal = true,
AutoRender = false,
Collapsible = true,
Maximizable = true,
Hidden = true,

Loader = new ComponentLoader
{
Url = "Logon.aspx",
Mode = LoadMode.Frame, //Data
DisableCaching = true,
LoadMask =
{
ShowMask = true
}
}
};

this.Form.Controls.Add(winLogon);
*/
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>eZConnect</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#005D62" width="100%">
<tr>
<td>
<ext:Image runat="server" ImageUrl="Images/ezconnect_big_logo.jpg" Width="298" Height="65" Resizable="false" />
</td>

<td>
<ext:Button runat="server" Text="News Annoucement" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/news.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Inbound Tracker" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/inboundtracker.png">
<Listeners>
<%-- Use this simple method --%>
<Click Handler="window.location = 'InboundTracker_Win2.aspx'"/>

<%-- comment to old method --%>
<Click Handler="#{InboundWin}.show(this);"/>
<Show Handler="#{InboundWin}.load();" />
<Hide Handler="#{InboundWin}.clearContent();" />
--%>

</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Product List" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/productrelease.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>
</td>
<td>
<ext:Button runat="server" Text="Incident Log" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/incidentlog.png">
<Listeners>
<Click Handler="alert('To be constructed');" />
</Listeners>
</ext:Button>

</td>

<td width="850" align="right">


<ext:Button runat="server" Text="Logon" Cls="my-scale" OverCls="x-over" PressedCls="x-button-pressed" IconUrl="Icons/logon.png">
<Listeners>
<%--
<Click Handler="#{LogonWindow1}.show(this);" />
--%>
</Listeners>
</ext:Button>
</td>
</tr>
</table>
<ext:Image runat="server" ImageUrl="Images/firstpage1.jpg" Width="920" Height="520"/>


</form>
</body>
</html>
fabricio.murta
Jan 28, 2021, 7:27 PM
I have fixed by the workaround method, click the page to forward that URL instead of opening by ext.window method, here is the code for reference, thanks for the attention anyway!

Hi, just to confirm, you mean here you could resolve the three questions you had with the second post and no longer need a reply?

Just in case, I will throw a few words on your inquiries, but they might need specific details to be more accurate, probably.


I am not sure it is a system bug or my program bug that if click the window border to resize then it hang cannot click buttons inside that window but can click "close" button.

You mean by resizing the window the layout freezes and you can no longer interact with it? Sometimes movable handles may lose focus when mouse moves outside the browser's viewport but so far what I noticed is that the "drag effect" is stuck until you click again, but it then lifted nicely and the resizable handle was again usable along the rest of the page. You can probably interact with the window's close button at top-right corner because it is not part of the window's body, but rather its title bar, which may not get "masked" when the window is busy.


Also, how to clear "reset" the window setting (clear cache maybe?) that everytime I click the button to open a window? I tried to use the window.load() and window.clearContent() after adding listener show and hide event on the button, but seems not work? Or I used wrong methods?

You can really see a hidden window as a "cached" one. Ready to be displayed again, right. You have a few approaches to do so, the App.MyWindow.clearContent() being a good alternative especially when you use loaders, as illustrated in this example (see panel 3) (https://examples5.ext.net/#/Panel/Basic/Deferred_Loading/). But in case you have code that actually instantiates a new window, create a new window from scratch when triggered, your best bet to get a "reset window" instance is to destroy() it once it is closed (so it can't be minimized at all). You enable this with window's CloseAction="Destroy" (https://docs.sencha.com/extjs/7.3.1/classic/Ext.window.Window.html#cfg-closeAction) setting. It really depends on the window complexity to tell whether you're better off destroying and re-creating it, or reconfiguring an existing window just before show().


And, not sure also due to these 2 event, when type this page Home.aspx on the browser and then it also load to "InboundTracker.aspx" (seems only click the button to open a new window)

I take it with "InboundTracker.aspx" you meant "InboutTracker_Win2.aspx", as I don't see any exact reference for the former in your code (nor as the name of the page itself). I must also assume the page sample you posted itself is what you refer to as Home.aspx.

Well, you bound a window, not hidden, maximized, to a loader which loads -- as an iframe -- the InboundTracker_Win2.aspx page, and you do not explicitly specify AutoLoad="false". Then the loader's default action is taken. When you add a window that is not hidden in a page, Ext.NET (as a convenience, as pure Ext JS doesn't do it) calls the window's .show() method. This ultimately triggers the loader. Thus the inner page is loaded once the outer page is loaded and the window is to be displayed.

Hope this clarifies the points you raised. If you still have problems, let us know and we'll do our best to respond you. Bear in mind if your follow-up question is not really in the same subject, a new forum thread is advised.