PDA

View Full Version : [CLOSED] Errors updating Panels' loaders in TabPanel



sbg
May 02, 2012, 11:08 AM
Hello,

we get some troubles (a set of javascript errors) trying to update a TabPanel, after an item is selected on a TreePanel. Anyway the problem seems caused by the way we update the TabPanel because we get the same errors with the following code.
After the button is clicked, the content of the panel is updated but after that the TabPanel stops working: every click causes a javascript error.


TestClientTab.aspx


<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<!DOCTYPE html>
<html>
<head runat="server"><title>Tab Error</title></head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<script type="text/javascript">
function OnClick1() {
App.Panel1.loader = {
url: "TabContent.aspx?id=1&panel=1",
renderer: "frame",
loadMask: {
showMask: true,
msg: "Loading ..."
}
};
App.Panel2.loader = {
url: "TabContent.aspx?id=1&panel=2",
renderer: "frame",
loadMask: {
showMask: true,
msg: "Loading ..."
}
};
App.Panel1.reload();
App.Panel2.reload();
}
</script>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" EnableViewState="True">
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" ID="Button1" Text="Click me 1">
<Listeners>
<Click Handler="OnClick1();">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Panel1" Closable="false">
<Loader runat="server" Url="TabContent.aspx" Mode="Frame" ID="L1">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="Panel2" Closable="false">
<Loader runat="server" Url="TabContent.aspx" Mode="Frame" ID="L2">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</div>
</form>
</body>
</html>



TabContent.aspx

<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
<!DOCTYPE html>
<html>
<head runat="server"><title>Content</title></head>
<body>
<form id="form1" runat="server">
<div>
Id of Panel = <%= Request.QueryString["id"] %>
</div>
<div>
Id of Button = <%= Request.QueryString["id"] %>
</div>
</form>
</body>
</html>

Daniil
May 02, 2012, 1:26 PM
Hi,

This is how I would implement the requirement, works without any errors.

Example

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

<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var load = function () {
var options1 = {
params : {
id : 1,
panel : 1
}
},
options2 = {
params : {
id : 2,
panel : 2
}
};

if (App.Panel1.rendered) {
App.Panel1.load(options1);
} else {
App.Panel1.on("afterrender", function () {
this.load(options1);
});
}

if (App.Panel2.rendered) {
App.Panel2.load(options2);
} else {
App.Panel2.on("afterrender", function () {
this.load(options2);
});
}
}
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:TabPanel runat="server">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Load content" Handler="load" />
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel
ID="Panel1"
runat="server"
Title="Tab 1"
Closable="false">
<Loader
runat="server"
Url="Test.aspx"
Mode="Frame"
AutoLoad="false">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
<ext:Panel
ID="Panel2"
runat="server"
Title="Tab 2"
Closable="false">
<Loader
runat="server"
Url="Test.aspx"
Mode="Frame"
AutoLoad="false">
<LoadMask ShowMask="True" />
</Loader>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</body>
</html>