[CLOSED] MessageBox X-close button listener?

  1. #1

    [CLOSED] MessageBox X-close button listener?

    Hi,

    I'm curious if it's possible to handle the Close event of a message box when it's X button is pressed. I've looked into the server side MessageBoxConfig object for pointers but didn't find much for that matter. Basically, I'd like to invoke the same javascript function as if the OK button was hit.

                        X.Msg.Show(new MessageBoxConfig
                        {
                            Title = "Warning",
                            Message = "Exit to close the tab!",
                            Buttons = MessageBox.Button.OK,
                            Icon = MessageBox.Icon.WARNING,
                            AnimEl = this.ClientID,
                            Fn = new JFunction { Fn = "closeThisTab" }
                        });
    Thanks,

    Vadym
    Last edited by Daniil; Jun 12, 2012 at 2:54 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Well, there is no such config option. I can suggest the following solution.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void ShowMsg(object sender, DirectEventArgs e)
        {
            X.Msg.Show(new MessageBoxConfig
            {
                Title = "Warning",
                Message = "Exit to close the tab!",
                Buttons = MessageBox.Button.OK,
                Icon = MessageBox.Icon.WARNING,
                Fn = new JFunction { Fn = "someHandler" },
            });
    
            X.Js.Call("Ext.Msg.getDialog().on", "hide", new JRawValue("someHandler"), null, new JRawValue(new { single = true }));
        }
    </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>Ext.NET Example</title>
    
        <script type="text/javascript">
            var someHandler = function () {
                alert("Hello!");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Button runat="server" Text="Test" OnDirectClick="ShowMsg" />
    </body>
    </html>
  3. #3
    Thanks for the suggestion Daniil! The sample works fine. In my situation, dismissing an alert box should close the tab, on which it resides. It works well by clicking the "OK" button. In case of the X button click, I'm getting a javascript error "Ext is undefined". How should I change the workaround?

    Thanks,

    Vadym
  4. #4
    Please provide a sample to reproduce.
  5. #5
    Please refer to the code below.

    Thanks,

    Vadym

    AlertBoxMain.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="Ext.Net" %>
    <!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>
    <script runat="server">
          
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
            }
        }
    
        protected void Store_OnRefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            this.GridPanel1.GetStore().DataSource = this.Data;
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", "Conglomerates", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", "Basic Materials", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", "Consumer Goods",  83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", "Financial", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", "Financial", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", "Technology", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", "Industrial", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", "Industrial", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", "Financial", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", "Basic Materials", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", "Energy", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", "Industrial", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", "Consumer", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", "Technology", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", "Industrial", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", "Technology", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", "Technology", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", "Consumer", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", "Financial", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", "Consumer", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", "Consumer", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", "Technology", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", "Consumer", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", "Consumer", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", "Consumer", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", "Consumer", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", "Industrial", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", "Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", "Consumer", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
          
    </script>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Companies"
                    Region="North" TrackMouseOver="true" Height="300">
                    <Store>
                        <ext:Store ID="Store1" runat="server" OnRefreshData="Store_OnRefreshData">
                            <Reader>
                                <ext:ArrayReader>
                                    <Fields>
                                        <ext:RecordField Name="company" />
                                        <ext:RecordField Name="industry" />
                                        <ext:RecordField Name="price" Type="Float" />
                                        <ext:RecordField Name="change" Type="Float" />
                                        <ext:RecordField Name="pctChange" Type="Float" />
                                        <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    </Fields>
                                </ext:ArrayReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="Company" Header="Company" DataIndex="company" Width="120" />
                            <ext:Column ColumnID="Industry" Header="Industry" DataIndex="industry" Width="120" />
                            <ext:DateColumn Header="Last Updated" DataIndex="lastChange" Width="120" />
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                    </SelectionModel>
                </ext:GridPanel>
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                    <Items>
                        <ext:Panel runat="server" ID="Tab1" Title="Tab 1">
                            <AutoLoad Mode="IFrame" Url="~/AlertBoxTab.aspx?TabID=Tab1" ShowMask="true" />
                        </ext:Panel>
                        <ext:Panel runat="server" ID="Tab2" Title="Tab 2">
                            <AutoLoad Mode="IFrame" Url="~/AlertBoxTab.aspx?TabID=Tab2" ShowMask="true" />
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    AlertBoxTab.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.HiddenTabID.SetValue(Request.QueryString["TabID"]);
                X.Msg.Show(new MessageBoxConfig
                {
                    Title = "Warning",
                    Message = "Press OK or X to close the tab!",
                    Buttons = MessageBox.Button.OK,
                    Icon = MessageBox.Icon.WARNING,
                    Fn = new JFunction { Fn = "closeTab" },
                });
    
                X.Js.Call("Ext.Msg.getDialog().on", "hide", new JRawValue("closeTab"), null, new JRawValue(new { single = true }));
            }
        }
    </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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <script type="text/javascript">
            var closeTab = function () {
                var tabID = Ext.getCmp("HiddenTabID").getValue();
                var tab = window.parent.Ext.getCmp(tabID);
                var tabPanel = window.parent.Ext.getCmp("TabPanel1");
                tabPanel.closeTab(tab);
            };
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Hidden runat="server" ID="HiddenTabID">
        </ext:Hidden>
        </form>
    </body>
    </html>
  6. #6
    Please try to add:
    delay = 10
    here
    X.Js.Call("Ext.Msg.getDialog().on", "hide", new JRawValue("closeTab"), null, new JRawValue(new { single = true, delay = 10 }));
  7. #7
    Quote Originally Posted by Daniil View Post
    Please try to add:
    delay = 10
    here
    X.Js.Call("Ext.Msg.getDialog().on", "hide", new JRawValue("closeTab"), null, new JRawValue(new { single = true, delay = 10 }));
    The delay worked. Is it reliable and cross-browser compatible?

    Thanks,

    Vadym
  8. #8
    Yes, I think it should be reliable and cross-browser.

    Please report if you will face any troubles with that solution.
  9. #9
    Thanks Daniil!

    You can mark this question as resolved.

    Vadym
  10. #10
    Finally, it has been fixed in SVN.
    http://forums.ext.net/showthread.php?25703

    Now a MessageBox's callback triggers on click pf the close tool.

Similar Threads

  1. Create a button to close a window
    By Orwel in forum 2.x Help
    Replies: 2
    Last Post: Aug 10, 2012, 12:16 PM
  2. [CLOSED] How can I close a tab using a button.
    By majunior in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 18, 2011, 3:00 PM
  3. Replies: 3
    Last Post: Sep 10, 2010, 2:07 PM
  4. [CLOSED] MessageBox: stop execution until message box button is clicked
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 06, 2010, 2:24 PM
  5. Component with close button
    By powerPT in forum 1.x Help
    Replies: 1
    Last Post: Jun 04, 2008, 9:49 PM

Tags for this Thread

Posting Permissions