Aug 06, 2013, 4:15 PM
[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.
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]