[CLOSED] How to show message prompt with window 'Hide' listener?

[rnachman]

Hi,

I have configured window by adding 'hide' listener and also added button with click listener which will fire one event. The same click listener functionality added in 'hide' listener of window. Actually the event will check some parameters and will display prompt message box. If I click on close button the prompt message is showing, but while click on 'X' ( window tool to close ) the window simply hiding without showing prompt. The code for window configuration...

var ShowPDFViewWindow = function (url, appid, condid) {
            //alert(url);
            var windowConfig = {
                id: "WindowPDFView",
                height: 650,
                width: 950,
                hidden: false,
                buttonAlign: "center",
                //closeAction: "hide",
                title: "PDF Viewer",
                listeners: {
                    hide: {
                        fn: function (el, e) {                            
                            parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');
                        }
                    }
                },
                buttons: [
                    {
                        id: "btnViewerClose",
                        text: "Close",
                        listeners: {
                            click: {
                                fn: function (el, e) {
                                    parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');
                                }
                            }
                        }
                    }
                ],
                autoLoad: {
                    url: "PDFViewer/Index.aspx?" + new Date().getTime(),
                    nocache: true,
                    mode: "iframe",
                    showMask: true,
                    triggerEvent: "show",
                    reloadOnEvent: true,
                    params: {
                        URL: url,
                        APPID: appid,
                        CONDID: condid
                    }
                }
            }
            parent.parent.parent.renderWindow(windowConfig);
        }

[Daniil]

Hi,

Please try to replace:

parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');

with

this.getBody().btnExit.fireEvent('click');

withing the hide listener.

[rnachman]

Hi Daniil,

I tried according to your suggestion but still not showing the prompt. As per ExtJs API it is saying that window hide method "Fires after the component is hidden. Fires after the component is hidden when calling the hide method". According to this actually the event is firing but unable to show prompt messagebox. In 'btnExit' event I have called DirectMethod which will check all parameters and then will prompt the user to select one option, based on selection required functionality will execute then window will close. Everything working fine if I click on Close button, but not working if I click on 'X'.

Hi,

Please try to replace:

parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');

with

this.getBody().btnExit.fireEvent('click');

withing the hide listener.

[Daniil]

Are there any JS errors?

parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');

I would ensure the hide listener is triggered:

listeners: {
    hide: {
        fn: function (el, e) {
            alert('I am here');
            parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');
        }
    }
}

Is it triggered?

I have tested, the hide listener is triggered in the example below.

new Ext.Window({
    width  : 100,
    height : 100,
    hidden : false,
    listeners : {
        hide : {
            fn : function () {
                alert('hide');
            }
        }
    }
})

[rnachman]

Hi Daniil,

Yes it triggered the event. Please check following example. The window is hiding before raise hide event.

This is basic window which will open popup window...

<%@ 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">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test</title>
    <script language="javascript" type="text/javascript">
        var ShowPDFViewWindow = function (e) {

            var windowConfig = {
                id: "WindowPDFView",
                height: 350,
                width: 650,
                hidden: false,
                buttonAlign: "center",
                title: "PDF Viewer",
                listeners: {
                    hide: {
                        fn: function (el, e) {
                            alert("I am here");
                            parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');
                        }
                    }
                },
                buttons: [
                    {
                        id: "btnViewerClose",
                        text: "Close",
                        listeners: {
                            click: {
                                fn: function (el, e) {
                                    parent.Ext.getCmp('WindowPDFView').getBody().btnExit.fireEvent('click');
                                }
                            }
                        }
                    }
                ],
                autoLoad: {
                    url: "TestPDFWindow.aspx?" + new Date().getTime(),
                    nocache: true,
                    mode: "iframe",
                    showMask: true,
                    triggerEvent: "show",
                    reloadOnEvent: true
                }
            }
            renderWindow(windowConfig);
        }

        var renderWindow = function (windowConfig) {
            var win = Ext.getCmp(windowConfig.id);
            if (!win) {
                new Ext.Window(windowConfig);
            } else {
                win.close();
                new Ext.Window(windowConfig);
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Button ID="btnOpenWindow" runat="server" Text="Open Popup">
    <Listeners>
    <Click Handler="ShowPDFViewWindow()" />
    </Listeners>
    </ext:Button>
    </form>
</body>
</html>

The popup window html code ...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestPDFWindow.aspx.cs" Inherits="Testing_TestPDFWindow" %>
<%@ 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></title>
    <script language="javascript" type="text/javascript">
        var ShowDocumentInfo = function (btn) {
            if (btn == "ok") {
            //execute function                
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Button ID="btnExit" runat="server" Text="Exit">
    <Listeners>
    <Click Handler="Ext.net.DirectMethods.ShowSaveOption();" />
    </Listeners>
    </ext:Button>
    </form>
</body>
</html>

The code behind for this window is...

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class Testing_TestPDFWindow : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [DirectMethod()]
    public void ShowSaveOption()
    {
        Ext.Net.MessageBox msgbox = new Ext.Net.MessageBox();

        Ext.Net.MessageBoxConfig msgConfig = new Ext.Net.MessageBoxConfig();

        JFunction jfun = new JFunction();
        jfun.Fn = "ShowDocumentInfo";

        msgConfig.Title = "Save Document";
        msgConfig.Icon = MessageBox.Icon.WARNING;
        msgConfig.Fn = jfun;
        msgConfig.Message = "The document have some changes. Do you want to save the document?";
        msgConfig.Buttons = MessageBox.Button.YESNO;
        msgbox.Configure(msgConfig);
        msgbox.Show();
    }
}

Please click on close button and see the message box is prompting to select the option. I need to show same message box while click on 'X' also.

[Daniil]

I would recommend to use the beforehide listener.

listeners: {
    beforehide : {
        fn: function (el, e) {
            this.getBody().btnExit.fireEvent('click');
            return false;
        }
    }
}

Then manually hide the Window after a user answers.

[rnachman]

Hi Daniil,

I have already tried with this listener, this listener is firing always whenever you try to hide window.

I would recommend to use the beforehide listener.

listeners: {
    beforehide : {
        fn: function (el, e) {
            this.getBody().btnExit.fireEvent('click');
            return false;
        }
    }
}

Then manually hide the Window after a user answers.

[Daniil]

Please clarify why is it the problem?

The hide listener is also fired each time when the Window is hidden.

One question more - do you need to prevent hiding till a user answers something?

[rnachman]

Yes Daniil,

It needs to prevent hiding till user answer something.

I have implemented with simple parameter. In same beforehide listener I have verified one parameter initially based on that parameter return false or true; Now it is working.

Please clarify why is it the problem?

The hide listener is also fired each time when the Window is hidden.

One question more - do you need to prevent hiding till a user answers something?

[Daniil]

Please clarify can we mark the thread as closed?