Jun 09, 2011, 3:34 PM
[CLOSED] How to disable buttons on a Window loaded from external Url when nested dialog window is displayed
Hi guys,
I need to display a dialog window from a modal popup window, which is loaded from an external url via AutoLoad.
This popup window has buttons defined in Window <Buttons> section (on the main page). When dialog window is shown from this popup window, buttons on the popup window are not masked and can be clicked.
I solved similar issue for MessageBox by moving Ext.Msg.show() to the main page.
Unfortunately, it doesn't work for Window case. I tried to .disable() the popup window before showing the dialog window, but got even worse effect.
I think there should be a way to change parent for dialog window from popup window to main page to make dialog window mask it's parent.
Any idea?
Here are simplified sources:
Main page:
I need to display a dialog window from a modal popup window, which is loaded from an external url via AutoLoad.
This popup window has buttons defined in Window <Buttons> section (on the main page). When dialog window is shown from this popup window, buttons on the popup window are not masked and can be clicked.
I solved similar issue for MessageBox by moving Ext.Msg.show() to the main page.
Unfortunately, it doesn't work for Window case. I tried to .disable() the popup window before showing the dialog window, but got even worse effect.
I think there should be a way to change parent for dialog window from popup window to main page to make dialog window mask it's parent.
Any idea?
Here are simplified sources:
Main page:
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
<script language="javascript" type="text/javascript">
function modal() {
Ext.Msg.show({
title: 'Warning',
msg: 'MsgBox',
buttons: Ext.Msg.OKCANCEL,
animEl: 'elId',
icon: Ext.MessageBox.WARNING
});
}
function modalw(wnd) {
wnd.show();
}
</script>
<ext:Panel runat="server" Width = "300" Height="500">
<%--this panel is just to demonstrate what .disable() does--%>
<Items>
<ext:Button ID="Button" runat="server" Text="Show Popup Window">
<Listeners>
<Click Handler="#{popupWindow}.show();" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Window
ID="popupWindow"
runat="server"
Icon="ApplicationEdit"
Title="Popup Window"
Width="850"
Height="500"
Hidden="true"
Modal="true"
Closable="true"
Layout="fit">
<AutoLoad Mode="IFrame" ShowMask="true" Url="Popup1.aspx"/>
<Buttons>
<ext:Button ID="Close" runat="server" Text="Cancel" Icon="Decline">
<Listeners>
<Click Handler="#{popupWindow}.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</body>
</html>
Popup page (Popup1.aspx):<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" RemoveViewState="true" IDMode="Explicit" />
<script language="javascript" type="text/javascript">
function modal() {
Ext.Msg.show({
title: 'Warning',
msg: 'MsgBox',
buttons: Ext.Msg.OKCANCEL,
animEl: 'elId',
icon: Ext.MessageBox.WARNING
});
}
function modalw(wnd) {
wnd.show();
}
</script>
<ext:Button ID="Button" runat="server" Text="MessageBox from popup">
<Listeners>
<Click Handler="modal();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="MessageBox from parent page">
<Listeners>
<Click Handler="window.parent.modal();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="Disable parent and show Window">
<Listeners>
<Click Handler="window.parent.wnd.disable(); #{dialogWindow}.show();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Show Modal Window">
<Listeners>
<Click Handler="modalw(#{dialogWindow});" />
</Listeners>
</ext:Button>
<ext:Button ID="Button4" runat="server" Text="Show Modal Window from parent page">
<Listeners>
<Click Handler="window.parent.modalw(#{dialogWindow});" />
</Listeners>
</ext:Button>
<ext:Window ID="dialogWindow" Icon="Add" Title="Dialog Window" runat="server" Width="600" AutoHeight="true" Padding="5" Modal="true" Hidden="true">
<Content>
<ext:FormPanel ID="FormPanel2" runat="server" Border="false">
<Items>
<ext:TextField ID="text1" runat="server" FieldLabel="Formula" AnchorHorizontal="100%">
</ext:TextField>
</Items>
</ext:FormPanel>
</Content>
<Buttons>
<ext:Button ID="Button36" runat="server" Text="Cancel" Icon="Decline">
<Listeners>
<Click Handler="#{dialogWindow}.hide(); " />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>
</body>
</html>
Last edited by Daniil; Jun 13, 2011 at 3:59 PM.
Reason: [CLOSED]