What's New?

Tabchange masking

  1. #1
    May 10, 2011, 11:59 PM

    Tabchange masking

    Hi,

    I have a 4 tab panels. Whenever there's a tabchange event, it triggers a direct method which
    will set the triggered panel autoload.url, autoload.mask e.t.c. The problem is, whenever the mask is displayed, I am still able to click on other tabs. Is there a way to mask the entire tab panel such that when a tab is loading, none of the tabs will be clickable?
    Last edited by norphos; May 11, 2011 at 12:07 AM.
  2. #2
    May 11, 2011, 5:33 AM
    Try this: Ext.getBody( ).mask( 'Loading...' );
  3. #3
    May 11, 2011, 6:06 AM
    Hi firebank,

    Im performing the masking at server side level. Not sure if i can apply the solution to the code.


            [DirectMethod]
        public void ChangeTab(string value, string url)
        {
            Panel mainPanel = (Panel)ExtNet.GetCmp("pMain");
            TabPanel tp = (TabPanel)ExtNet.GetCmp("TabPanel1");
            Panel panel = (Panel)ExtNet.GetCmp(value);
      
            panel.AutoLoad.Url = url + "?sid=" + Request.QueryString["sid"];
            panel.AutoLoad.Mode = LoadMode.IFrame;
            panel.AutoLoad.ShowMask = true;
            panel.AutoLoad.MaskMsg = "Loading...";
            panel.AutoLoad.NoCache = true;
         
            panel.LoadContent();
            tp.SetActiveTab(panel);
        }
  4. #4
    May 11, 2011, 6:45 AM
    Maybe DirectMethods's eventMask will help.

    <%@ 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">

<script runat="server">
    [DirectMethod]
    public void ChangeTab( string value, string url )
    {
        //...
        System.Threading.Thread.Sleep( 1000 );
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var addTab = function( ) {
            //Ext.getBody( ).mask( 'Loading...' );
            Ext.net.DirectMethods.ChangeTab( '', '', {
                eventMask: {
                    showMask: true,
                    minDelay: 200,
                    msg: 'Loading...'
                },
                success: function( result ){
                },
                complete: function( ) {
                    //Ext.getBody( ).unmask( );
                }
            });
        };
    </script>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <form id="form1" runat="server">
    <div>
        <ext:TabPanel runat="Server" ID="TabPanel1">
            <Items>
                <ext:Panel runat="Server" ID="Panel111" Title="Panel111" Height="600">
                    <Items>
                        <ext:Button runat="Server" ID="BtnAddTab" Text="DirectMethod">
                            <Listeners>
                                <Click Fn="addTab" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:TabPanel>
    </div>
    </form>
</body>
</html>

Similar Threads

  1. TabStrip and DirectEvents with TabChange
    By HansWapenaar in forum 2.x Help
    Replies: 0
    Last Post: May 23, 2012, 1:21 PM
  2. [CLOSED] Unable to select a corresponding Menu on TabChange
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 14, 2012, 12:15 PM
  3. TabPanel load panel in TabChange
    By naina in forum 1.x Help
    Replies: 1
    Last Post: Aug 02, 2011, 3:43 PM
  4. Tabchange masking help
    By norphos in forum 1.x Help
    Replies: 9
    Last Post: May 19, 2011, 2:41 PM
  5. [CLOSED] [1.0] TabPanel - Solution for no TabChange on Page_Load
    By bsnezw in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 06, 2010, 4:27 PM

Posting Permissions