[CLOSED] How NOT to show the loading mask for TabPanel?

  1. #1

    [CLOSED] How NOT to show the loading mask for TabPanel?

    Hi,

    Please suggest how to properly disable the loading mask when a new tab is added and initially loaded. One would think setting showMask config option to "false" would suffice but it didn't work for me under IE9. I also couldn't see how Loader.DisableCaching=true gets rendered on the client and/or if this option is still relevant at all. Am I missing anything? On the related note, if you could please provide a link to a good example where setting the loader options on the client is explained, it would be appreciated. I'm finding the 2.x Panel client side object model to be generally incompatible with that from the previous version.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Adding Tabs On The Fly - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
                var addTab = function (tabPanel, id, url, menuItem) {
                    var tab = tabPanel.getComponent(id);
    
                    if (!tab) {
                        tab = tabPanel.add({ 
                            id       : id, 
                            title    : url, 
                            closable : true,
                            menuItem : menuItem,
                            loader   : {
                                url      : url,
                                renderer : "frame",
                                loadMask : {
                                    showMask : false,
                                    msg      : "Loading " + url + "..."
                                }
                            }
                        });
    
                        tab.on("activate", function (tab) {
                            #{MenuPanel1}.setSelection(tab.menuItem);
                        });
                    }
                
                    tabPanel.setActiveTab(tab);
                }
            </script>
        </ext:XScript>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window ID="Window1" runat="server" Title="Adding tab" Width="700" Height="500"
            Icon="Link" Layout="BorderLayout">
            <Items>
                <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                    <Menu ID="Menu1" runat="server">
                        <Items>
                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Ext.NET">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net', this);" />
                                </Listeners>
                            </ext:MenuItem>
                            <ext:MenuSeparator />
                            <ext:MenuItem ID="MenuItem2" runat="server" Text="Ext.NET forums">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net', this);" />
                                </Listeners>
                            </ext:MenuItem>
                            <ext:MenuSeparator />
                            <ext:MenuItem ID="MenuItem3" runat="server" Text="Sencha">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com', this);" />
                                </Listeners>
                            </ext:MenuItem>
                        </Items>
                    </Menu>
                </ext:MenuPanel>
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Aug 07, 2013 at 12:41 PM. Reason: [CLOSED]
  2. #2
    Hello!

    You should set loadMask to false:

    if (!tab) {
    	tab = tabPanel.add({ 
    		id       : id, 
    		title    : url, 
    		closable : true,
    		menuItem : menuItem,
    		loader   : {
    			url      : url,
    			renderer : "frame",
    			loadMask : false
    		}
    	});
    
    	tab.on("activate", function (tab) {
    		#{MenuPanel1}.setSelection(tab.menuItem);
    	});
    }
  3. #3
    Thanks! Could you provide the list of client side config options for the loader object or a link to it?
  4. #4
    I'm sorry but we haven't created the reference for our client-side API. But you can look at these examples: https://examples2.ext.net/#/Panel/Basic/Loader/ and investigate what scripts generated from server-side.
  5. #5
    Thanks for the link! What's the purpose of the DisableCaching property and how is it rendered on the client (I couldn't find it in the page source)? I have it set to "true" in 1.x and would like to know if I should migrate it as is.
  6. #6
    Some parameters have description attribute so you can see description of it in the source-code or on tooltips of Visual Studio.

    That's what it says about Disable-Caching:

    True to add a unique cache-buster param to GET requests. (defaults to true)
    Generally, it should be true if don't want cached values.
  7. #7
    Is this the correct way to set it?

            loader   : {
                disableCaching: true
            }
  8. #8
    Yes, it's correct.
  9. #9
    Please note that DisableCaching should be true by default.

    As for the rest configs. Most of them are also described here:
    http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Loader
    http://docs.sencha.com/extjs/4.2.1/#...omponentLoader
  10. #10
    Thanks guys, that was helpful! Please mark this thread as closed.

Similar Threads

  1. Replies: 9
    Last Post: Nov 27, 2012, 11:16 PM
  2. [CLOSED] [1.0] Loading mask does not
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 11, 2010, 3:30 PM
  3. [CLOSED] Loading Mask
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 28, 2009, 12:44 PM
  4. Replies: 3
    Last Post: Jan 28, 2009, 5:02 PM
  5. Loading Mask
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 25, 2008, 6:55 AM

Tags for this Thread

Posting Permissions