Hi Peter,
The issue with the sample is that your handrolled Ext.FormPanel is being added to the Page inside the <form runat="server">. That then adds a <form> within a <form>, which the script is choking on.
If you want to add the Ext.FormPanel, the location it's rendered to must be placed outside the <form runat="server">, or you could also change to the an Ext.Panel.
The following code sample demonstrates a modified version of the .aspx Page and .js file.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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>Mixed Coolite + ExtJS</title>
<ext:ScriptContainer runat="server" />
<script src="A.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" Theme="Gray" />
<div id="mydiv">
<ext:Window
ID="Window1"
runat="server"
Title="Success"
Icon="Accept"
Html="This Page is properly configured!"
BodyStyle="padding:6px;"
/>
</form>
<!-- If Ext.FormPanel, then must render outside of form -->
<div id="mydiv2">
</body>
</html>
Example
Ext.BLANK_IMAGE_URL = '../ExtJS/resources/images/default/s.gif';
Ext.onReady(function() {
var simpleForm = new Ext.Panel({
region : 'north',
height : 80,
labelWidth : 75, // label settings here cascade
frame : true,
title : 'Simple Form',
width : 350,
defaults : {
width : 230
},
defaultType : 'textfield',
items : [{
fieldLabel : 'First Name',
name : 'first'
}]
});
var myContentIdWidth = 700;
var panel = new Ext.Panel({
title : '',
layout : 'border',
width : myContentIdWidth,
height : 500,
items : [simpleForm, {
title : 'Main Content',
height : 300,
region : 'center',
margins : '5 5 0 0'
}]
});
panel.render('mydiv');
});
Hope this helps.