[CLOSED] Objects missing in the "theForm"-Variable

  1. #1

    [CLOSED] Objects missing in the "theForm"-Variable

    Hello,

    I have a panel element with a DevExpress list. The user can work normally with it. The user can open the list in a larger size separate window, without a roundtrip to the server is necessary. But yet the user received errors from the list, when he operate with it. I've found the problem and created a small test program to show this problem.

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
            function maximizePanel(opanel) {
                if (opanel) {
    
                    var owin = new Ext.Window({ id: opanel.id + "_max", header: false, border: false, layout: 'fit', closable: true, closeAction: 'destroy', height: 300, width: 300 });
    
                    owin.add(opanel);
                    owin.show();
                }
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <ext:ResourceManager ID="RSM" runat="server" EnableViewState="true" AjaxViewStateMode="Enabled"></ext:ResourceManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Button ID="cmdAdd" OnClick="cmdAdd_Click" runat="server" Text="Request to the Server" />
                </ContentTemplate>
            </asp:UpdatePanel>
    
            <ext:Button ID="cmdShow" runat="server" Icon="MagnifierZoomIn" Text="Maximize Panel">
                <Listeners>
                    <Click Handler="maximizePanel(#{mypanel});"></Click>
                </Listeners>
            </ext:Button>
    
            <div id="main">
                <ext:Panel ID="mypanel" runat="server" Width="200" Height="200" Title="mypanel">
                    <Content>
                        <input id="txt" type="text" value="" />
                    </Content>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    Public Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub cmdAdd_Click(sender As Object, e As EventArgs)
    
            ' Action
    
        End Sub
    
    End Class
    After pressing the button "Request to the server" an Ajax call is created. The variable "theForm.elements" contains the objects "cmdAdd" and "txt". This condition is fine. When the user presses the button "Maximize", the panel is displayed in a window object in the center of the screen. If now the button "Request to the server" is pressed, there is only the element "cmdAdd" in the variable "theForm.elements". This behavior represents my problem. Why is the field "txt" no longer in the variable? Do I have an option to change this behavior?

    This behavior occurs in the Ext version 2.5.3 and 3.0.0.

    I hope, you can understand my description of the problem.

    Thank you in advance for your effort

    @Woyciniuk
    Last edited by Daniil; Feb 17, 2015 at 12:37 PM. Reason: [CLOSED]
  2. #2
    I don't think we're going to provide UpdatePanel support. It's likely that we will completely remove all support for the UpdatePanel soon.

    The following post can also provide some additional information:

    http://forums.ext.net/showthread.php...vascript-Error
    Geoffrey McGill
    Founder & CEO
  3. #3
    Hello Geoffey,

    it may not become clear. I have the updatepanel used in the example, to represent my problem easily. DevExpress used callback's to communicate with the server and requires there inputfields in the variable "theForm.elements", as well as an updatepanel. The insertion of a Panel in a Window these fields are removed from the variable. For a better understanding, I have changed the example. After pressing the button "Maximize Panel" the number of elements in the variable before and after the action is now displayed.


    
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication1._Default" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
            function maximizePanel(opanel) {
                if (opanel) {
    
                    
                    alert("The variable contains " + theForm.elements.length + " elements");
    
                    var owin = new Ext.Window({ id: opanel.id + "_max", header: false, border: false, layout: 'fit', closable: true, closeAction: 'destroy', height: 300, width: 300 });
    
                    owin.add(opanel);
                    owin.show();
    
                    alert("The variable contains " + theForm.elements.length + " elements");                
                }
            }
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <ext:ResourceManager ID="RSM" runat="server" EnableViewState="true" AjaxViewStateMode="Enabled"></ext:ResourceManager>
            <ext:Button ID="cmdShow" runat="server" Icon="MagnifierZoomIn" Text="Maximize Panel">
                <Listeners>
                    <Click Handler="maximizePanel(#{mypanel});"></Click>
                </Listeners>
            </ext:Button>
    
            <div id="main">
                <ext:Panel ID="mypanel" runat="server" Width="200" Height="200" Title="mypanel">
                    <Content>
                        <asp:TextBox ID="txt" runat="server" EnableViewState="true"></asp:TextBox>
                    </Content>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>

    I realize that you no longer want to support the updatepanel, this also applies to callbacks?

    @Woyciniuk
  4. #4
    By default, if you do not specify a location to render the Window to, it will render to the last position in the DOM. For example, just before the end of the </body>.

    In your sample your sample, the Window is rendering outside of theForm, and the Panel is being moved into the Window, thereby removing it from the theForm. That action will account for the difference in theForm.elements.length.

    You can control where the Window is "rendered to" in the DOM by setting the renderTo config. More information in the Ext JS documentation, see

    http://docs.sencha.com/extjs/5.1/5.1...w-cfg-renderTo

    The following example demonstrates usage of the renderTo config.

    Example

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var maximizePanel = function (panel) {
                alert("The variable contains " + theForm.elements.length + " elements");
    
                var win = new Ext.Window({
                    id: panel.id + "_max",
                    header: false,
                    layout: 'fit',
                    height: 300,
                    width: 300,
                    renderTo: theForm
                });
    
                win.add(panel);
    
                win.show();
    
                alert("The variable contains " + theForm.elements.length + " elements");
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server" />
    
            <ext:ResourceManager runat="server" />
            
            <ext:Button runat="server" Text="Maximize Panel">
                <Listeners>
                    <Click Handler="maximizePanel(#{Panel1});" />
                </Listeners>
            </ext:Button>
    
            <div>
                <ext:Panel 
                    ID="Panel1" 
                    runat="server" 
                    Width="200" 
                    Height="200" 
                    Title="mypanel">
                    <Content>
                        <asp:TextBox runat="server" />
                    </Content>
                </ext:Panel>
            </div>
        </form>
    </body>
    </html>
    The sample you provided does not contain an UpdatePanel.
    Last edited by geoffrey.mcgill; Feb 06, 2015 at 1:19 PM.
    Geoffrey McGill
    Founder & CEO

Similar Threads

  1. [CLOSED] Error: 'theForm' is undefined
    By marco.morreale in forum 2.x Premium Help
    Replies: 7
    Last Post: May 06, 2014, 5:40 AM
  2. [CLOSED] 'theForm.__EVENTTARGET' is null or not an object
    By kevinhwang in forum 2.x Premium Help
    Replies: 3
    Last Post: Nov 05, 2013, 8:25 PM
  3. [CLOSED] Error: 'theForm' is undefined
    By marco.morreale in forum 2.x Help
    Replies: 0
    Last Post: May 04, 2012, 12:36 PM
  4. How to use the server variable in mvc page!
    By EagleShi in forum 1.x Help
    Replies: 3
    Last Post: Jan 14, 2010, 1:43 AM
  5. Request - A variable for the Base URL
    By m4chine in forum 1.x Help
    Replies: 17
    Last Post: Jun 18, 2008, 5:33 PM

Tags for this Thread

Posting Permissions