Jul 01, 2009, 5:31 PM
[FIXED] [V1.0.0] Bug with ViewPort control and multi-form pages
It seems that when you have a page with more than 1 [form] tag the <ext:Viewport> control will attempt to render in the first form and not its actual parent.
Before anyone jumps on me, I know ASP.net only allows 1 form per page but this only applies to form marked as runat="server".
The basis for my example was https://examples1.ext.net/#/ViewPort...in_CodeBehind/.
Hope this gives you enough to start tracing the problem.
Regards,
Before anyone jumps on me, I know ASP.net only allows 1 form per page but this only applies to form marked as runat="server".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="myhead" runat="server">
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/includes/xtheme-slate.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="/FavIcon.ico" type="image/x-icon" />
<style>
#SwitchCurrentUser
{
color: #1E589A;
font-size: 90%;
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #708CB2;
}
.BorderColor
{
border-bottom: 2px solid #024BA0;
}
</style>
</head>
<body id="mybody" runat="server">
<div class="Non-Printing">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="BorderColor" style="color: #024BA0; background-color: #F0F9E8;">
<div style="padding-bottom: 2px; padding-top: 2px; padding-left: 5px; margin-right: 100px;
border-bottom: 0px;">
<a href="/" style="border-bottom: 0px;">
<img id="headerPic" src="/Images/Header.gif" alt="ImageLogo" title='ImageLogo" '
width="175" height="33" border="0" /></a>
</td>
<td class="BorderColor" style="color: #024BA0; background-color: #F0F9E8;">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ, selObj, restore) { //v3.0
if (selObj.options[selObj.selectedIndex].value != "") {
eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'");
if (restore) selObj.selectedIndex = 0;
} else {
selObj.selectedIndex = 0;
}
}
//-->
</script>
<form name="frmQuickLinks" id="frmQuickLinks" method="get" action="">
<table>
<tr>
<td>
<select style="width: 220px;" name="menu1" onchange="MM_jumpMenu('parent',this,1);">
<option value="" selected="selected">--Quick Links--</option>
<option value="">&nbsp;</option>
<option value="/Placea">Place A</option>
<option value="/Placeb">Place B</option>
<option value="/Placec">Place C</option>
<option value="/Placed">Place D</option>
</select>
</td>
<td>
<noscript>
<input name="Go" type="image" title="Go" value="Go" src="/Images/Go.gif" alt="Go"
width="27" height="20" /></noscript>
</td>
</tr>
</table>
</form>
</td>
<td class="BorderColor" style="color: #024BA0; background-color: #F0F9E8;" align="right">
<form id="frmSearchIndexServer" name="frmSearchIndexServer" action="/Support/search.aspx"
method="get">
<table>
<tr>
<td valign="bottom">
<input style="width: 120px;" id="txtSearchWidget" name="txtSearchWidget" type="search"
size="20" maxlength="50" />
</td>
<td>
<input id="btnSearch" type="image" title="Search" value="Search" src="/Images/Search.gif"
alt="Search" width="49" height="20" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td colspan="5" valign="top" nowrap="nowrap" class="BorderColor" style="color: #024BA0;
padding-left: 10px; padding-top: 3px; padding-bottom: 3px; padding-right: 10px;
background-color: #FFFAD1;">
<div class="HeaderNav">
Menus Removed
<div class="HeaderNav" id="LoggedInInfo">
</td>
</tr>
</table>
<form id="frmMain" runat="server">
<ext:ScriptManager ID="extScriptManager" runat="server" AjaxViewStateMode="Exclude" />
<ext:ViewPort ID="ViewPort1" runat="server">
<Body>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Split="true" Collapsible="true">
<ext:Panel ID="Panel1" runat="server" Title="North" Height="150" BodyStyle="padding:6px;"
Html="North" />
</North>
<West MinWidth="225" MaxWidth="400" Split="true" Collapsible="true">
<ext:Panel ID="WestPanel" runat="server" Title="West" Width="225">
<Body>
<ext:Accordion ID="Accordion1" runat="server" Animate="true">
<ext:Panel ID="Navigation" runat="server" Title="Navigation" Border="false" BodyStyle="padding:6px;"
Icon="FolderGo" Html="West" />
<ext:Panel ID="Settings" runat="server" Title="Settings" Border="false" BodyStyle="padding:6px;"
Icon="FolderWrench" Html="Some settings in here" />
</ext:Accordion>
</Body>
</ext:Panel>
</West>
<Center>
<ext:TabPanel ID="CenterPanel" runat="server">
<tabs>
<ext:Tab
ID="CenterTab1"
runat="server"
Title="Center"
Border="false"
BodyStyle="padding:6px;"
Html="<h1>ViewPort with BorderLayout</h1>"
/>
<ext:Tab
ID="CenterTab2"
runat="server"
Title="Close Me"
Closable="true"
Border="false"
BodyStyle="padding:6px;"
Html="Closeable Tab"
/>
</tabs>
</ext:TabPanel>
</Center>
<East Collapsible="true" Split="true" MinWidth="225">
<ext:Panel ID="EastPanel" runat="server" Width="225" Title="East">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="1" TabPosition="Bottom"
Border="false">
<tabs>
<ext:Tab
ID="Tab1"
runat="server"
Title="Tab 1"
Border="false"
BodyStyle="padding:6px;"
Html="East Tab 1"
/>
<ext:Tab
ID="Tab2"
runat="server"
Title="Tab 2"
Closable="true"
Border="false"
BodyStyle="padding:6px;"
Html="East Tab 2"
/>
</tabs>
</ext:TabPanel>
</ext:FitLayout>
</Body>
</ext:Panel>
</East>
<South Split="true" Collapsible="true">
<ext:Panel ID="SouthPanel" runat="server" Title="South" Height="150" BodyStyle="padding:6px;"
Html="South" />
</South>
</ext:BorderLayout>
</Body>
</ext:ViewPort>
</form>
</body>
</html>The basis for my example was https://examples1.ext.net/#/ViewPort...in_CodeBehind/.
Hope this gives you enough to start tracing the problem.
Regards,
