[FIXED] [#500] [3.2.0] Portlet loading mask is moving with scrollbar of main panel in Ext V 2.5

  1. #1

    [FIXED] [#500] [3.2.0] Portlet loading mask is moving with scrollbar of main panel in Ext V 2.5

    Hi,

    When scrolling page scroll bar on loading of page, the loading mask also moving up/down. This behaviour only with V2.5, in V1.7 the loading mask not scrolling.
    Please find the attached screen shot for your reference.
    We have page to display widgets like below structure. You can reproduce the below test case code.
    <ext:Portal>
    <Items>  
    <ext:PortalColumn>
    <Items>                                                 
      <ext:Portlet>
      <ext:Portlet>
      <ext:Portlet>
    
    <%@ Page Language="C#" %>
    <%@ Import Namespace="Ext.Net.Utilities" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                string text = @"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.";
                this.ResourceManager1.RegisterClientScriptBlock("text", string.Format("var text=\"{0}\";", text));
                foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
                {
                    portlet.Html = "={text}";                
                    portlet.Loader = new ComponentLoader
                {
                    Url = "https://examples2.ext.net/#/GridPanel/Infinite_Scrolling/Tuner/",
                    Mode = LoadMode.Frame,
                    LoadMask =
                    {
                        ShowMask = true
                    }
                };
                    portlet.BodyPadding = 5;
                    portlet.CloseAction = CloseAction.Hide;
                }
            }
            foreach (Portlet portlet in ControlUtils.FindControls<Portlet>(this.Page))
            {
                portlet.DirectEvents.Hide.Event += Portlet_Hide;
                portlet.DirectEvents.Hide.EventMask.ShowMask = true;
                portlet.DirectEvents.Hide.EventMask.Msg = "Saving...";
                portlet.DirectEvents.Hide.EventMask.MinDelay = 500;
                
                portlet.DirectEvents.Hide.ExtraParams.Add(new Ext.Net.Parameter("ID", portlet.ClientID));
            }
        }
        protected void Portlet_Hide(object sender, DirectEventArgs e)
        {
           X.Msg.Alert("Status", e.ExtraParams["ID"] + " Hidden").Show();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Portal in TabPanel - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" /> 
        
        <style>
            .x-column-padding{
                padding : 10px 0px 10px 10px;
            }
            
            .x-column-padding1{
                padding : 10px;
            }
        </style>  
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:Viewport runat="server" Layout="BorderLayout">
                <Items>
                    <ext:TabPanel 
                        runat="server" 
                        Region="Center"
                        ActiveTabIndex="0" 
                        Title="TabPanel"
                        MarginSpec="5 5 5 0">
                        <Items>
                            <ext:Panel runat="server" Title="Tab 2" Layout="FitLayout">
                                <Items>
                                    <ext:Portal runat="server" Border="false">
                                        <Items>
                                            <ext:PortalColumn 
                                                runat="server" 
                                                Cls="x-column-padding">
                                                <Items>
                                                    <ext:Portlet ID="Portlet7" Title="Another Panel 3" runat="server" />
                                                    <ext:Portlet ID="Portlet1" Title="Another Panel 3" runat="server" />
                                                    <ext:Portlet ID="Portlet2" Title="Another Panel 3" runat="server" />
                                                    <ext:Portlet ID="Portlet3" Title="Another Panel 3" runat="server" />
                                                    <ext:Portlet ID="Portlet4" Title="Another Panel 3" runat="server" />
                                                </Items>
                                            </ext:PortalColumn>
                                            <ext:PortalColumn 
                                                runat="server" 
                                                Cls="x-column-padding">
                                                <Items>
                                                    <ext:Portlet ID="Portlet8" Title="Panel 2" runat="server" />
                                                    <ext:Portlet ID="Portlet9" Title="Another Panel 2" runat="server" />
                                                    <ext:Portlet ID="Portlet6" Title="Panel 2" runat="server" />
                                                    <ext:Portlet ID="Portlet11" Title="Another Panel 2" runat="server" />
                                                    <ext:Portlet ID="Portlet13" Title="Panel 2" runat="server" />
                                                    <ext:Portlet ID="Portlet14" Title="Another Panel 2" runat="server" />
                                                </Items>
                                            </ext:PortalColumn>
                                            <ext:PortalColumn 
                                                runat="server" 
                                                Cls="x-column-padding1">
                                                <Items>
                                                    <ext:Portlet ID="Portlet10" Title="Another Panel 1" runat="server" />
                                                </Items>
                                            </ext:PortalColumn>
                                        </Items>
                                    </ext:Portal>  
                                </Items>                                  
                            </ext:Panel>
                        </Items>
                    </ext:TabPanel> 
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Portlet_LoadingMask_Issue1.GIF 
Views:	28 
Size:	57.0 KB 
ID:	11921   Click image for larger version. 

Name:	Portlet_LoadingMask_Issue_2.GIF 
Views:	27 
Size:	60.2 KB 
ID:	11931  
    Last edited by Daniil; Jun 26, 2015 at 11:42 AM. Reason: [FIXED] [#500] [3.2.0]
  2. #2
    Hi @iansriley,

    Reproduced. I'll try to find a solution.
  3. #3
    It turned out that it is a known problem.
    http://www.sencha.com/forum/showthread.php?236224

    I've created an Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/500

    @lukerahl's suggestion appears to help.
    http://www.sencha.com/forum/showthre...l=1#post869903

    Fix
    Ext.override(Ext.Component, {
        setLoading: function (load, targetEl) {
            var me = this,
                config;
    
            if (me.rendered) {
                Ext.destroy(me.loadMask);
                me.loadMask = null;
    
                if (load !== false && !me.collapsed) {
                    if (Ext.isObject(load)) {
                        config = Ext.apply({}, load);
                    } else if (Ext.isString(load)) {
                        config = { msg: load };
                    } else {
                        config = {};
                    }
    
                    if (targetEl) {
                        me.loadMask = new Ext.LoadMask(me.getTargetEl(), config);
                    } else {
                        me.loadMask = new Ext.LoadMask(me.el, config);
                    }
    
                    me.loadMask.show();
                }
            }
    
            return me.loadMask;
        }
    });
  4. #4
    With the above script the issue is not resolved. I placed the suggested script on page and tested, but still the loading mask is scrolling with parent scroll.

    Thank you.
  5. #5
    Is the override script in the page's <head>?
  6. #6
    Quote Originally Posted by Daniil View Post
    Is the override script in the page's <head>?
    Sorry.. the script is working fine. You can close this thread.

    Thank you.
  7. #7
    The issue is not reproducible with the latest Ext.NET from SVN trunk. So, the upcoming Ext.NET 3.2.0 release will not contain this issue. Though, it could be fixed earlier in 3.x.

Similar Threads

  1. Replies: 0
    Last Post: Jul 23, 2013, 8:08 AM
  2. [CLOSED] Mask position when loading Panel's content
    By RCN in forum 2.x Legacy Premium Help
    Replies: 10
    Last Post: Oct 17, 2012, 2:02 PM
  3. [CLOSED] Remove moving a node VS loading targetĀ“s children.
    By RCN in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 14, 2012, 5:11 PM
  4. [CLOSED] Portlet scrollbar issue
    By webppl in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 10, 2012, 2:57 AM
  5. [CLOSED] ShowMask of ViewPort/ Main Panel
    By macap in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jun 20, 2010, 9:59 AM

Tags for this Thread

Posting Permissions