[CLOSED] Change in LoadMask appearance

**Aparna_B** · Feb 07, 2013, 1:52 AM

Hi,

I am trying to simulate the mask used in the site: http://onlinehelp.nexiant.com/#home. I tried using Ext.LoadMask() but could not do that perfect. Could you please provide me the sample code which simulate?

My Code is as given below:

<html>
<head id="Head1" runat="server">
    <title>Testing</title>
    <style type="text/css">      
        .x-mask-loading3 div {
            padding:5px 10px 5px 50px;
            background:no-repeat 5px 5px;                       
            background-image:url(../../Content/image/loading32.gif);            
            line-height:30px;
            font-size: medium;
        }
    </style>
    <script language="javascript" type="text/javascript" >
        var ShowMask = function (IndexPageViewPort) {
            var mask = new Ext.LoadMask(IndexPageViewPort.el, { msg: "Loading...", el: IndexPageViewPort.el, msgCls: "ext-el-mask-msg x-mask-loading3" });
            mask.show();
        }
        
    </script>
</head>
<body>
    <div>    
        <ext:ResourceManager ID="a" runat="server" />

<ext:Viewport ID="viewPort123" runat="server" >
<Content>
<ext:Label Text="Testing Mask" />
</Content>
        <Listeners>
        <BeforeRender Handler="ShowMask(#{viewPort123});" />
        </Listeners>
</ext:Viewport>
    </div>
</body>
</html>

**Daniil** · Feb 07, 2013, 4:37 AM

Hello @Aparna B,

Please take a look at 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>
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .my-ext-el-mask-msg {
            width: 32px;
            height: 32px;
            background-image: url("resources/images/loading32.gif");
        }
    </style>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        Ext.Element.prototype.customMask = function (msg, msgCls) {
            var me  = this,
                dom = me.dom,
                dh  = Ext.DomHelper,
                EXTELMASKMSG = "my-ext-el-mask-msg",
                el,
                mask,
                data = Ext.Element.data;

            if (!/^body/i.test(dom.tagName) && me.getStyle('position') == 'static') {
                me.addClass("x-masked-relative");
            }
            if (el = data(dom, 'maskMsg')) {
                el.remove();
            }
            if (el = data(dom, 'mask')) {
                el.remove();
            }

            mask = dh.append(dom, {cls : "ext-el-mask"}, true);
            data(dom, 'mask', mask);

            me.addClass("x-masked");
            mask.setDisplayed(true);
                
            var mm = dh.append(dom, {cls : EXTELMASKMSG, cn: {tag: 'div'}}, true);

            data(dom, 'maskMsg', mm);
            mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
            mm.setDisplayed(true);
            mm.center(me);
                
            // ie will not expand full height automatically
            if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
                mask.setSize(undefined, me.getHeight());
            }
                
            return mask;
        }    
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server">
        <Listeners>
            <Render Handler="this.getEl().customMask();" />
        </Listeners>
    </ext:Viewport>
</body>
</html>

Also you might be interested to look at this example.
https://examples1.ext.net/#/Panel/BodyMask/Custom_Mask/

**Aparna_B** · Feb 07, 2013, 5:05 AM

Awesome.. Thanks Daniil, Since the code is custom mask, could you please tell me how to hide? :). Appreciate your help.

Originally Posted by Daniil

Hello @Aparna B,

Please take a look at 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>
<head runat="server">
    <title>Ext.NET Example</title>

    <style type="text/css">
        .my-ext-el-mask-msg {
            width: 32px;
            height: 32px;
            background-image: url("resources/images/loading32.gif");
        }
    </style>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        Ext.Element.prototype.customMask = function (msg, msgCls) {
            var me  = this,
                dom = me.dom,
                dh  = Ext.DomHelper,
                EXTELMASKMSG = "my-ext-el-mask-msg",
                el,
                mask,
                data = Ext.Element.data;

            if (!/^body/i.test(dom.tagName) && me.getStyle('position') == 'static') {
                me.addClass("x-masked-relative");
            }
            if (el = data(dom, 'maskMsg')) {
                el.remove();
            }
            if (el = data(dom, 'mask')) {
                el.remove();
            }

            mask = dh.append(dom, {cls : "ext-el-mask"}, true);
            data(dom, 'mask', mask);

            me.addClass("x-masked");
            mask.setDisplayed(true);
                
            var mm = dh.append(dom, {cls : EXTELMASKMSG, cn: {tag: 'div'}}, true);

            data(dom, 'maskMsg', mm);
            mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
            mm.setDisplayed(true);
            mm.center(me);
                
            // ie will not expand full height automatically
            if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
                mask.setSize(undefined, me.getHeight());
            }
                
            return mask;
        }    
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server">
        <Listeners>
            <Render Handler="this.getEl().customMask();" />
        </Listeners>
    </ext:Viewport>
</body>
</html>

Also you might be interested to look at this example.
https://examples1.ext.net/#/Panel/BodyMask/Custom_Mask/

**Daniil** · Feb 07, 2013, 5:21 AM

Please use:

Viewport1.getEl().unmask();

**Aparna_B** · Feb 07, 2013, 6:35 AM

Hi Daniil,

Thanks for your discerning response. I used your code and added a grid with 1 column and the image of the mask disappeared. Can you please help me?? If I add some other control like ext:label, it works.

<ext:Viewport ID="Viewport1" runat="server">
        <Items>
        <ext:NxtGridPanel ID="aaa" runat="server" NxtSupportPaging="true" StoreID="dsNumber" Height="400" >
        <ColumnModel> 
        <Columns>
        <ext:Column Header="Number" DataIndex="number" />
        </Columns>        
        </ColumnModel>                      
        </ext:GridPanel>
        </Items>
        <Listeners>
            <Render Handler="this.getEl().customMask();" />
        </Listeners>
    </ext:Viewport>

Originally Posted by Daniil

Please use:

Viewport1.getEl().unmask();

**Daniil** · Feb 07, 2013, 10:18 AM

Could you provide a runnable sample to reproduce?

**Aparna_B** · Feb 07, 2013, 7:39 PM

Hi Daniil, I am sorry for providing incomplete code.

Here we go:

<html>
<head id="Head1" runat="server">
    <title>Ext.NET Example</title>
 
    <style type="text/css">
        .my-ext-el-mask-msg {
            width: 32px;
            height: 32px;
            background-image: url(../../Content/image/loading32.gif);
        }
    </style>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
 
    <script type="text/javascript">
        Ext.Element.prototype.customMask = function (msg, msgCls) {
            var me = this,
                dom = me.dom,
                dh = Ext.DomHelper,
                EXTELMASKMSG = "my-ext-el-mask-msg",
                el,
                mask,
                data = Ext.Element.data;

            if (!/^body/i.test(dom.tagName) && me.getStyle('position') == 'static') {
                me.addClass("x-masked-relative");
            }
            if (el = data(dom, 'maskMsg')) {
                el.remove();
            }
            if (el = data(dom, 'mask')) {
                el.remove();
            }

            mask = dh.append(dom, { cls: "ext-el-mask" }, true);
            data(dom, 'mask', mask);

            me.addClass("x-masked");
            mask.setDisplayed(true);

            var mm = dh.append(dom, { cls: EXTELMASKMSG, cn: { tag: 'div'} }, true);

            data(dom, 'maskMsg', mm);
            mm.dom.className = msgCls ? EXTELMASKMSG + " " + msgCls : EXTELMASKMSG;
            mm.setDisplayed(true);
            mm.center(me);

            // ie will not expand full height automatically
            if (Ext.isIE && !(Ext.isIE7 && Ext.isStrict) && me.getStyle('height') == 'auto') {
                mask.setSize(undefined, me.getHeight());
            }

            return mask;
        }       
        
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
 
 <ext:Store ID="dsNumber" runat="server" AutoLoad="true">
    <Proxy>
        <ext:HttpProxy Url="/Home/GetNumber1" />
    </Proxy>
    <Reader>
        <ext:JsonReader Root="data">
            <Fields>            
                <ext:RecordField Name="number" Type="Int"  />
                <ext:RecordField Name="date" Type="Date" />    
                <ext:RecordField Name="currency" Type="Float" />  
                <ext:RecordField Name="Enabled" Type="Boolean" DefaultValue="true" />
                <ext:RecordField Name="Subscribed" Type="Boolean" DefaultValue="true" />         
            </Fields>
        </ext:JsonReader>
    </Reader>        
</ext:Store>

    <ext:Viewport ID="Viewport1" runat="server">
        <Items>
        <ext:GridPanel ID="aaa" runat="server" NxtSupportPaging="true" StoreID="dsNumber" Height="400" >
        <ColumnModel> 
        <Columns>
        <ext:Column Header="Number" DataIndex="number" />            
        </Columns>        
        </ColumnModel>                      
        </ext:GridPanel>
        </Items>
        <Listeners>
            <Render Handler="this.getEl().customMask();" />
        </Listeners>
    </ext:Viewport>
</body>
</html>

Originally Posted by Daniil

Could you provide a runnable sample to reproduce?

**Baidaly** · Feb 08, 2013, 1:19 AM

Hello!

You have to add small delay:

<Render Handler="this.getEl().customMask();" Delay="1" />

Or you can change your CSS:

.my-ext-el-mask-msg {
	width: 32px;
	height: 32px;
	background-image: url(../../Content/image/loading32.gif);
	position: absolute !important;
}

Thread: [CLOSED] Change in LoadMask appearance

Thread Tools

Search Thread

Display

[CLOSED] Change in LoadMask appearance

Change In Load Mask

Still problem in Masking :(

Complete Code

Similar Threads

[CLOSED] LoadMask

[CLOSED] Strange SpinnerField appearance after changing theme

[CLOSED] disabled button appearance

[CLOSED] GridPanel Header wrapping causing odd appearance

LoadMask

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Change in LoadMask appearance

[CLOSED] Change in LoadMask appearance

Change In Load Mask

Still problem in Masking :(

Complete Code

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us