[1.0] Same CSS mask class for loading indication and modal windows

  1. #1

    [1.0] Same CSS mask class for loading indication and modal windows

    Hallo,

    I found out that the same CSS class for the mask is used for the loading and the modal mask when showing windows modally.
    How can I use different behaviors for these two different things?

    The reason why I need two different classes is that I use a white background (pages are also white) for the loading mask, so that it doesn't flash the updated parts (from 50% opaque gray --> white); just showing the loading indicator.

    However for a modal window that is displayed, the mask should indicate that it's modal and the only active usable control on the web page. this is where the default opaqued gray is ok.

    So, how to use two different masks?
  2. #2
  3. #3
    msgClass affects only the loading indicator box.

    I need to change the color of the mask. Best way would be to set it declaratevely as maskCls propety or something, so that I can define an extended css style
    .myCls .ext-el-mask
    {
        background-color:red;
    }
  4. #4
    Hi,

    I have looked in ExtJS sources and was surprised that "ext-el-mask" is just hardcoded, see .mask() of Ext.Element.

    Well, here is a way how you could apply custom mask. Not so nice, but works.

    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>
    
        <style type="text/css">
            .my-mask {
                background-color: Red;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Panel 
            ID="Panel1" 
            runat="server" 
            Height="200" 
            Width="200" 
            Html="Custom mask" />
        <ext:Button runat="server" Text="Mask">
            <Listeners>
                <Click Handler="var mask = Panel1.body.mask(); mask.addClass('my-mask');" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Unmask">
            <Listeners>
                <Click Handler="Panel1.body.unmask();" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  5. #5
    Thanks for the reply Daniil.
    This is what I tried yesterday, too. It works but how about the loading mask e.g. when an IFrame is loading? How can I manipulate this one? (without calling mask() manually to get the reference to the mask)

    I also found out, that if you modify .ext-el-mask and set background: transparent; no mask is created. The background of modal dialogs are not disabled anymore.
    Last edited by nextSTEP; Jan 28, 2011 at 6:41 AM.
  6. #6
    Hi,

    Please investigate the following example.

    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>
    
        <style type="text/css">
            .my-message-mask div {
                background-color: yellow;    
            }
            
            .my-modal-mask {
                background-color: red;
            }
            
            .my-load-mask .ext-el-mask {
                background-color: green;
            }
        </style>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Modal="true" 
            BodyCssClass="my-load-mask">
            <AutoLoad 
                Url="TestPage.aspx" 
                MaskCls="my-message-mask" 
                ShowMask="true" 
                Timeout="20000" />
            <Listeners>
                <BeforeShow Handler="this.mask.addClass('my-modal-mask');"/>
            </Listeners>
        </ext:Window>
        Hi!
        </form>
    </body>
    </html>
    This example also can be helpful.
    https://examples1.ext.net/#/Panel/BodyMask/Custom_Mask/
  7. #7
  8. #8
    Thank you for your replies, guys. Once again you did an excellent job!

Similar Threads

  1. [CLOSED] Modal desktopwindow and event mask
    By CSG in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: Nov 24, 2011, 9:03 PM
  2. [CLOSED] Mask not covering the modal window
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 20, 2011, 3:46 PM
  3. Mask CSS Class?
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Aug 17, 2010, 2:32 PM
  4. [CLOSED] BUG desktop modal windows doen't show context menu in FF
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: May 28, 2010, 7:22 AM
  5. [CLOSED] Desktop BUG: Modal windows can be minimized and you can interact with the other windows
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 31, 2009, 2:49 PM

Tags for this Thread

Posting Permissions