[FIXED] [V1.0.0] Bug with ViewPort control and multi-form pages

  1. #1

    [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".

    <!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" &#111;nchange="MM_jumpMenu('parent',this,1);">
                                        <option value="" selected="selected">--Quick Links--</option>
                                        <option value="">&amp;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 first image is what the pages renders as, the second is what I expected (and what i got when i removed the "extra" forms).

    The basis for my example was https://examples1.ext.net/#/ViewPort...in_CodeBehind/.

    Hope this gives you enough to start tracing the problem.

    Regards,

    T. Nathan Wheeler
    Desktop Programmer, I.T.
    Pensacola Christian College
  2. #2

    RE: [FIXED] [V1.0.0] Bug with ViewPort control and multi-form pages

    Hi tnwheeler,

    I think this was fixed with the v0.8.1 release. I will test to confirm.

    Geoffrey McGill
    Founder
  3. #3

    RE: [FIXED] [V1.0.0] Bug with ViewPort control and multi-form pages

    Apparently I was thinking of something else. I ran your sample and fixed another issue.

    The fix has been commited to SVN, although might not be publicly available until the v1.0 release.


    Geoffrey McGill
    Founder

Similar Threads

  1. Replies: 11
    Last Post: Oct 25, 2012, 12:08 PM
  2. [CLOSED] Is it possible to control child form controls from main form?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 13, 2012, 12:24 PM
  3. [FIXED] Minor issue on forum pages
    By plykkegaard in forum Bugs
    Replies: 24
    Last Post: Aug 09, 2012, 4:41 PM
  4. Replies: 4
    Last Post: Feb 23, 2010, 7:38 AM
  5. [CLOSED] Which control can I use without bordes to load aspx pages?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 01, 2010, 7:13 PM

Posting Permissions