What's New?

[CLOSED] How to disable buttons on a Window loaded from external Url when nested dialog window is displayed

  1. #1
    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:
    <%@ 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]
  2. #2
    Jun 09, 2011, 5:04 PM
    Hi,

    I'm getting an js error when click on 'Disable parent and show Window' button, are you? Well, I see that there is a wrong id 'wnd', should be 'popupWindow'.

    This thing
    window.parent.modalw(#{dialogWindow});
    doesn't work because it's defined/rendered to the iframe page all the same. In the case with parent.Ext.Msg.show() a window is really opened at a parent page.

    The possible solutions:

    1. Define the window within the parent page (I guess it's not an option).
    2. Disable the button (and, perhaps other things), not the window.
    3. Render the window dynamically (either on client side or server side) to the parent page.
  3. #3
    Jun 10, 2011, 12:53 PM
    Hi,

    Thank you,
    Solution with disabling buttons works fine for me, but it is still not convenient enough because window should have Closable="false" to hide the closing button too. Sometimes this closing button may be required by design, but luckily I can hide it in my case. How can I enable/disable (not hide) the closing button?

    Sorry for js error... Was in hurry.
  4. #4
    Jun 10, 2011, 1:17 PM
    Well, there is no standard way, but, certainly, it's possible.

    I've prepared the example for you.

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

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

<!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>Ext.Net Example</title>

    <script type="text/javascript">
        var disableHide = function (win) {
            win.tools.close.addClass("x-item-disabled");
            win.on('before' + win.closeAction, win.disableCloseTool);
        }
        
        var enableHide = function (win) {
            win.tools.close.removeClass("x-item-disabled");
            win.un('before' + win.closeAction, win.disableCloseTool);
        }
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Window ID="Window1" runat="server" Closable="true">
        <CustomConfig>
            <ext:ConfigItem 
                Name="disableCloseTool" 
                Value="function () { return false; }" 
                Mode="Raw" />
        </CustomConfig>
    </ext:Window>
    <ext:Button runat="server" Text="Disable">
        <Listeners>
            <Click Handler="disableHide(Window1)" />
        </Listeners>
    </ext:Button>
    <ext:Button runat="server" Text="Enable">
        <Listeners>
            <Click Handler="enableHide(Window1)" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

Similar Threads

  1. How to open a non nested window?
    By ausai in forum 1.x Help
    Replies: 4
    Last Post: Jul 05, 2012, 9:15 AM
  2. Why to discard loaded URL in window on hide?
    By dbassett74 in forum 1.x Help
    Replies: 5
    Last Post: Dec 26, 2011, 12:38 PM
  3. Calendar in window - no events displayed
    By reiben in forum 1.x Help
    Replies: 4
    Last Post: May 04, 2011, 3:41 PM
  4. [CLOSED] [1.0] Calendar - hide/disable buttons in event edit window
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 08, 2010, 12:21 PM
  5. External window - problem with the event
    By Kaido in forum 1.x Help
    Replies: 2
    Last Post: Feb 05, 2009, 7:45 AM

Posting Permissions