[CLOSED] Display modal while grid/page loads

  1. #1

    [CLOSED] Display modal while grid/page loads

    I was hoping to have something like a "Page Loading..." modal display while my page and grid is being loaded. I use the "EventMask ShowMask="true"" for on button click events so was wondering if I can do something like that?
  2. #2

    RE: [CLOSED] Display modal while grid/page loads

    Hi,

    Please see the following example
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Coolite.Sandbox.Temp.LoadingMask.Default" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Loading mask</title>
        <style type="text/css">
            #loading-mask{
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                z-index:20000;
                background-color:white;
            }
            #loading{
                position:absolute;
                left:45%;
                top:40%;
                padding:2px;
                z-index:20001;
                height:auto;
            }
            #loading img {
                margin-bottom:5px;
            }
            #loading .loading-indicator{
                background:white;
                color:#555;
                font:bold 13px tahoma,arial,helvetica;
                padding:10px;
                margin:0;
                text-align:center;
                height:auto;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="loading-mask" style="">
    
            <div id="loading">
               <div class="loading-indicator"><img src="extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading, please wait...
    
            
    
            <ext:ScriptManager ID="ScriptManager1" runat="server">
                <Listeners>
                    <DocumentReady Handler="setTimeout(function(){Ext.get('loading').remove();Ext.get('loading-mask').fadeOut({remove:true});}, 250);" />
                </Listeners>
            </ext:ScriptManager>
            <ext:ScriptContainer ID="ScriptContainer1" runat="server">
            </ext:ScriptContainer>
            
            Page loading have finished
        </form>
    </body>
    </html>

Similar Threads

  1. Replies: 0
    Last Post: Feb 06, 2012, 7:29 PM
  2. DesktopWindow modal renderto whole page ?
    By xtremexploit in forum 1.x Help
    Replies: 4
    Last Post: Nov 16, 2011, 6:50 PM
  3. Replies: 0
    Last Post: Apr 04, 2011, 6:05 PM
  4. Replies: 14
    Last Post: Nov 02, 2010, 7:44 AM
  5. [CLOSED] [1.0] IE 8 modal display problem
    By Timur.Akhmerov in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 18, 2010, 12:21 PM

Posting Permissions