What's New?

[CLOSED] Window falling behind notification

  1. #1
    Nov 10, 2011, 8:31 AM

    [CLOSED] Window falling behind notification

    One more thing: my notification is falling behind the mask. I tried setting the new notification window z-index to 10000, but no luck.

    Steps to reproduce:
    1. Click 'Click me first';
    2. Click 'Click me second'.

    Source code bellow.

    Thanks

    <%@ Page Language="C#" %>
   
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Test(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(250);
 
        var window = new Window();
        window.ID = "window1";
        window.Y = 15;
        window.InitCenter = false;
        window.StyleSpec = "position: fixed; z-index: 10000";
        window.Render();
    }
</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>
      
    <style type="text/css">
        .x-mask-padding {
            padding-right: 17px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <div style="width: 800px; margin: 0 auto">
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
        </div>
        <ext:Window runat="server" Modal="true" Title="Window Title">
            <Items>
                <ext:Button runat="server" Text="Click me first">
                    <DirectEvents>
                        <Click
                            OnEvent="Test"
                            Before="Ext.getBody().addClass('x-mask-padding');
                                    Ext.net.Mask.show();"
                            Success="Ext.getBody().removeClass('x-mask-padding');
                                        Ext.net.Mask.hide();" />
                    </DirectEvents>
                </ext:Button>
                <ext:Button Text="Click me second" runat="server" />
            </Items>
        </ext:Window>
    </form>
</body>
</html>
    Last edited by Daniil; Nov 10, 2011 at 2:28 PM. Reason: [CLOSED]
  2. #2
    Nov 10, 2011, 9:43 AM
    Hi,

    Ext.WindowMgr manages Windows z-indexes, so, your custom z-index is overrode.
    http://docs.sencha.com/ext-js/3-4/#!/api/Ext.WindowMgr

    The WindowMgr class use the Window's setZIndex method.

    The setZIndex method
    // private
// z-index is managed by the WindowManager and may be overwritten at any time
setZIndex : function(index){
    if(this.modal){
        this.mask.setStyle('z-index', index);
    }
    this.el.setZIndex(++index);
    index += 5;

    if(this.resizer){
        this.resizer.proxy.setStyle('z-index', ++index);
    }

    this.lastZIndex = index;
}
    As you can see in the comment it can be overrode.

    So, the solution can look the following way.

    Example

    <%@ Page Language="C#" %>
    
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Test(object sender, DirectEventArgs e)
    {
        System.Threading.Thread.Sleep(250);
  
        var window = new Window();
        window.ID = "window1";
        window.Y = 15;
        window.InitCenter = false;
        window.StyleSpec = "position: fixed;";
        window.CustomConfig.Add(new ConfigItem("zIndex", "9999", ParameterMode.Raw));
        window.CustomConfig.Add(new ConfigItem("setZIndex", "mySetZIndex", ParameterMode.Raw));
        window.Render();
    }
</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 mySetZIndex = function (index) {
            //modification
            if (this.zIndex) {
                index = this.zIndex;
            }
            //end modification

            if (this.modal) {
                this.mask.setStyle('z-index', index);
            }
            this.el.setZIndex(++index);
            index += 5;

            if (this.resizer) {
                this.resizer.proxy.setStyle('z-index', ++index);
            }

            this.lastZIndex = index;
        };

    </script>
       
    <style type="text/css">
        .x-mask-padding {
            padding-right: 17px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <div style="width: 800px; margin: 0 auto">
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
            <ext:Panel
                runat="server"
                Title="Name"
                Html="Name"
                Height="300" />
        </div>
        <ext:Window runat="server" Modal="true" Title="Window Title">
            <Items>
                <ext:Button runat="server" Text="Click me first">
                    <DirectEvents>
                        <Click
                            OnEvent="Test"
                            Before="Ext.getBody().addClass('x-mask-padding');
                                    Ext.net.Mask.show();"
                            Success="Ext.getBody().removeClass('x-mask-padding');
                                     Ext.net.Mask.hide();" />
                    </DirectEvents>
                </ext:Button>
                <ext:Button Text="Click me second" runat="server" />
            </Items>
        </ext:Window>
    </form>
</body>
</html>
    In general, you can apply that overrode method globally to the Ext.Window class if you need.
  3. #3
    Nov 10, 2011, 2:12 PM
    That's it!!!

    Thank you :D

Similar Threads

  1. Close all the Notification Window.
    By NishaLijo in forum 1.x Help
    Replies: 3
    Last Post: Apr 03, 2012, 8:57 AM
  2. [CLOSED] Notification window
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 04, 2011, 2:01 PM
  3. [CLOSED] Notification window
    By majestic in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 18, 2011, 12:16 PM
  4. [CLOSED] Notification window behavior from 0.8.3 to 1.0
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 21, 2011, 2:02 PM
  5. [CLOSED] Is it possible to reuse notification window??
    By jchau in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 26, 2011, 4:56 PM

Posting Permissions