this.el is null, caused by <form runat="server">

Question

Ok I'm stumped, I have a good 10 other pages all using the same layout etc all working fine, but I created a new page and cannot get it to work.

I have noticed what is causing the error but I don't know why or how to fix it. Have a look at the code below,

Its a form with runat=server, Ext.Net Resource Manager, Viewport, Tab Panel and 2 Panels, no code behind.

When I load this i get the dreaded this.el is null in Firefox and Uncaught TypeError: Cannot set property 'setSize' of null in Chrome. But alas I remove the form tag and everything works as it should. Now you might say well just remove the form tag, but I cant will add asp.net controls later that needs this tag.

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PriceSetting.aspx.cs"  Inherits="V2_RenewalsProcess_PriceSetting" %>    
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<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 runat="server">
    <title>Ovott V2</title>
</head>
<body>
    <form id="pricesetting" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="Viewport1" runat="server" Layout="border">
            <Items>
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center">
                    <Items>
                        <ext:Panel ID="Panel5" runat="server" Title="To Be Submitted" Border="false">
                        </ext:Panel>
                        <ext:Panel ID="Panel6" runat="server" Title="Awaiting Approval">
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>

Probably really isn't a form issue, since when removing the runat="server" or the complete tag only results in the controls not loading the client scripts. Check if the TabPanel or Wievport control have a property called "Size" and if you're setting it to a "null" value somewhere or if you're not setting a value for it at all, try to set a default one and check if that works. — dejanb
I just tested it again the only thing i changed was removing the runat="server" from the form tag and it works perfectly, by the way the code in this post is the only code on the page so I dont set size or anything anywhere else. — Eugene Niemand
Jezus, I didn't notice at first, but your DOCTYPE tag is formed wrong, it's missing a "Q" in front "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">" — dejanb

Eugene Niemand Eugene Niemand · Accepted Answer · 2011-03-11T10:06:17

OK finally with the help of my colleague we solved this and it all came down to one character... a "!" and you might ask where?

Original Code

<DOCTYPE html PUBLIC "...

Fixed Code

<!DOCTYPE html PUBLIC "...

Now it is working

this.el is null, caused by <form runat="server">

1 Answers