Form in a LayoutDialog

[magsolutionz]

I'm hoping to get some suggestions on how to deal with this issue ...

I have a LayoutDialog that contains different types of information that is loaded dynamically. One of the dynamically loaded components is an Ext.Form that is added to the LayoutDialog via a setUrl call. The form script I'm using now is the example that comes with the docs and modified to show in the Layout Dialog instead of the document.body.


<div style="width:auto">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3>Fieldsets, labels right and complex fields</h3>
<div id="form-ct3">
<div></div>
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>

Testing and debugging in FF, I couldn't get this to work until I added the empty div shown in red above. After doing so, everything works like a charm in FF.

IE is a different story. IE doesn't like the extra div, and spits out "Invalid source HTML for this operation". Without the div, it throws "Unknown Runtime Error".

So, does anybody have any suggestions on how to handle this?

Here's the Form script:


<script type="text/javascript">
Ext.onReady (function() {
Ext.QuickTips.init();

// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';

var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 80,
layout: 'fit'
});

fs.fieldset(
{legend:'Contact Information'},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:190
}),

new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:190
}),

new Ext.form.DateField({
fieldLabel: 'Call Date',
name: 'calldate',
width:190,
allowBlank:false
})
);

fs.addButton('Save');
fs.addButton('Cancel');

fs.render('form-ct3');
});
</script>