What's New?

[CLOSED] Mask in code behind

  1. #1
    May 13, 2011, 4:10 PM

    [CLOSED] Mask in code behind

    Hello, I have a ViewPort similar to that reported in https://examples1.ext.net/#/ViewPort/Basic.
    In the West region I have a MenuPanel in which the click of one of the MenuItem runs some operations defined in CodeBehind (e.g.: FTP Upload or export of database).

    What I want to do is to display a Mask that expose the name of the phase that is done in codebehind and so my idea was to use a TaskManager with one Task for each phase

    The code I used is as follows, but unfortunately does not work :-(
    P.S.: Note that tpMain is the TabPanel name in Center region

    <ext:TaskManager ID="TM1" runat="server">
        <Tasks>
            <ext:Task AutoRun="false" 
                OnStart="#{tpMain}.body.mask('Step 1...', 'x-mask-loading');"
                OnStop="#{tpMain}.body.unmask();">
            </ext:Task>
            <ext:Task AutoRun="false" 
                OnStart="#{tpMain}.body.mask('Step 2...', 'x-mask-loading');"
                OnStop="#{tpMain}.body.unmask();">
            </ext:Task>
            <ext:Task AutoRun="false" 
                OnStart="#{tpMain}.body.mask('Step 3...', 'x-mask-loading');"
                OnStop="#{tpMain}.body.unmask();">
            </ext:Task>                        
        </Tasks>
    </ext:TaskManager>
    and in codebehind:
    Protected Sub DoSomething()
        TM1.StartTask(0)
        Threading.Thread.Sleep(5000)
        TM1.StopTask(0)

        TM1.StartTask(1)
        Threading.Thread.Sleep(5000)
        TM1.StopTask(1)

        TM1.StartTask(2)
        Threading.Thread.Sleep(5000)
        TM1.StopTask(2)
End Sub
    Thanks in advance!
    Last edited by Daniil; May 17, 2011 at 2:07 PM. Reason: [CLOSED]
  2. #2
    May 13, 2011, 4:26 PM
    Hi,

    I have prepared the example basing on
    https://examples1.ext.net/#/Miscella...r_Side_Update/

    Example
    <%@ Page Language="C#" %>

<%@ Import Namespace="System.Threading" %>
<%@ 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>ProgressBar - Ext.NET Examples</title>    
    
    <script runat="server">
        protected void StartLongAction(object sender, DirectEventArgs e)
        {
            this.Session["LongActionProgress"] = 0;
            ThreadPool.QueueUserWorkItem(LongAction);
            ResourceManager1.AddScript("{0}.startTask('longactionprogress');", TaskManager1.ClientID);
        }

        private void LongAction(object state)
        {
            for (int i = 0; i < 10; i++)
            {
                Thread.Sleep(1000);
                this.Session["LongActionProgress"] = i+1;
            }
            this.Session.Remove("LongActionProgress");
        }

        protected void RefreshMask(object sender, DirectEventArgs e)
        {
            object progress = this.Session["LongActionProgress"];

            if (progress != null)
            {
                X.Mask.Show(
                    new MaskConfig()
                    {
                        El = Panel1.ClientID + ".body",
                        Msg = string.Format("Step {0} of {1}...", progress.ToString(), 10)
                    }
                    );
            }
            else
            {
                ResourceManager1.AddScript("{0}.stopTask('longactionprogress');", TaskManager1.ClientID);
                X.Mask.Hide();
            }
        }

    </script>
    
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:Button ID="Button1" runat="server" Text="Start long action">
            <DirectEvents>
                <Click OnEvent="StartLongAction" />
            </DirectEvents>
        </ext:Button>
        
        <br />
        
        <ext:Panel ID="Panel1" runat="server" Height="300" Width="300" />
        
        <ext:TaskManager ID="TaskManager1" runat="server">
            <Tasks>
                <ext:Task 
                    TaskID="longactionprogress"
                    Interval="1000" 
                    AutoRun="false"
                    OnStart="
                        #{Button1}.setDisabled(true);"
                    OnStop="
                        #{Button1}.setDisabled(false);">
                    <DirectEvents>
                        <Update OnEvent="RefreshMask" />
                    </DirectEvents>                    
                </ext:Task>
            </Tasks>
        </ext:TaskManager>
        
    </form>
</body>
</html>
  3. #3
    May 13, 2011, 4:43 PM
    Thanks Daniil,
    I had seen this example too, but is not exactly what I wanted.

    The idea of ​​using the Mask allowed me to disable the center section (where there other objects), and my problem is that I dont know the duration of the operation, so I need something that does not have a fixed time but that allow me to change the content and / or terminate the Masking when the operation is finish
  4. #4
    May 13, 2011, 5:35 PM
    You can call
    X.Mask.Hide();
    when the long action is finished.

Similar Threads

  1. Need code highlighter like forum source code posts and examples source code view
    By tuananhdnx in forum 1.x Help
    Replies: 2
    Last Post: Feb 01, 2012, 6:56 AM
  2. [CLOSED] Calendar Panel Month View Problem, My Code and Ext .Net Examples Code
    By rbarr in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 07, 2011, 8:34 PM
  3. Load mask from code behind
    By maephisto in forum 1.x Help
    Replies: 11
    Last Post: Apr 13, 2011, 2:33 PM
  4. [CLOSED] [1.0] Render Portal Code behind Mask Issues
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 10, 2010, 11:18 AM
  5. Convert FormPanel from Html-Code to VB.Net Code
    By stephan1985 in forum 1.x Help
    Replies: 1
    Last Post: Jan 27, 2010, 3:47 PM

Tags for this Thread

Posting Permissions