Field labels appearing outside the fieldset div [Archive]

froamer

5 Oct 2007, 2:06 AM

Hi all, I have a form that contains a tab. Each tab will have a field set belonging to the form so I can have a single submit across all tabs.

My problem is, if I render my field set on a div within my tab the field appears in the correct place but the field label appears outside the tab. I am sure I am doing something daft. Here is the code...

var FormUI = {
init : function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var editForm = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
editForm.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
})).render('form-details'));

editForm.addButton('Save');
editForm.addButton('Cancel');
editForm.render('editForm');
}
}
var TabsUI = {
init : function(){
tabs = new Ext.TabPanel('tabs');
tabs.addTab('detailsTab', "<img src='../shared/images/icons/group.png' alt='' /> Details");
tabs.addTab('profileTab', "<img src='../shared/images/icons/vcard.png' alt='' /> Profile");
tabs.addTab('presentationTab', "<img src='../shared/images/icons/vcard.png' alt='' /> Presentation");
tabs.addTab('galleryTab', "<img src='../shared/images/icons/images.png' alt='' /> Gallery");
tabs.addTab('videoTab', "<img src='../shared/images/icons/film.png' alt='' /> Video");
tabs.addTab('diaryTab', "<img src='../shared/images/icons/calendar.png' alt='' /> Diary");
tabs.addTab('messagingTab', "<img src='../shared/images/icons/email.png' alt='' /> Messaging");
tabs.activate('detailsTab');
FormUI.init();
}
}

Ext.EventManager.onDocumentReady(TabsUI.init, TabsUI, true);

Here's what it looks like...
http://www.4DSites.com/downloads/external/Ext/fieldset_on_tabs.gif

fay

5 Oct 2007, 2:34 AM

The *main* problem was additional round braces in the fieldset. The following simplified version works in FF, but not in IE - there were a few gremlins that it didn't appreciate, like an extra comma after 'Contact Information', and not using var with tabs. There is still another error ("Invalid source HTML for this operation") that I can't track down in IE, but I'll leave that one up to you :) If you get a solution to it can you post back.

<script>
var FormUI = {
init : function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var editForm = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
editForm.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})
).render('form-details');

editForm.addButton('Save');
editForm.addButton('Cancel');
editForm.render('editForm');
}
};

var TabsUI = {
init : function(){
var tabs = new Ext.TabPanel('tabs');
tabs.addTab('detailsTab', "Details");
tabs.addTab('profileTab', "Profile");
tabs.activate('detailsTab');
FormUI.init();
}
};
Ext.onReady(TabsUI.init, TabsUI, true);
</script>

</head>

<body>
<form id="editForm">
<div id="tabs">
<div id="detailsTab"><div id="form-details"></div></div>
<div id="profileTab"></div>
</div>
</form>
</body>
</html>

froamer

5 Oct 2007, 3:45 AM

Thank a million fay!!!

That's got me back on track, I thought it was "code blindness" (a lesser known form of snow blindness).

Adding a missing var in front of tabs = new Ext.TabPanel('tabs'); fixed IE. Here is the final code. I hope it helps someone who sees the same symptoms..

var FormUI = {
init : function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var editForm = new Ext.form.Form({
labelWidth: 75, // label settings here cascade unless overridden
url:'save-form.php'
});
editForm.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})
).render('form-details');

editForm.addButton('Save');
editForm.addButton('Cancel');
editForm.render('editForm');
}
};
var TabsUI = {
init : function(){
var tabs = new Ext.TabPanel('tabs');
tabs.addTab('detailsTab', "<img src='../shared/images/icons/group.png' alt='' /> Details");
tabs.addTab('profileTab', "<img src='../shared/images/icons/vcard.png' alt='' /> Profile");
tabs.addTab('presentationTab', "<img src='../shared/images/icons/vcard.png' alt='' /> Presentation");
tabs.addTab('galleryTab', "<img src='../shared/images/icons/images.png' alt='' /> Gallery");
tabs.addTab('videoTab', "<img src='../shared/images/icons/film.png' alt='' /> Video");
tabs.addTab('diaryTab', "<img src='../shared/images/icons/calendar.png' alt='' /> Diary");
tabs.addTab('messagingTab', "<img src='../shared/images/icons/email.png' alt='' /> Messaging");
tabs.activate('detailsTab');
FormUI.init();
}
}

Ext.EventManager.onDocumentReady(TabsUI.init, TabsUI, true);

fay

5 Oct 2007, 4:06 AM

Could you post the corresponding HTML part (with the tab divs), because I can't get the bloody thing to work in IE7!

Thanks.

froamer

5 Oct 2007, 5:56 AM

Sure fay, it is a little bigger than needed for an example, since I am giving the fieldsets on the tabs a nice surround. Here is the html...

<div id="editForm">
<div id="tabs">
<div id="detailsTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Details</h3>
<div id="form-details"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="profileTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Profile</h3>
<div id="form-profile"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="presentationTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Presentation</h3>
<div id="form-presentation"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="galleryTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Image Gallery</h3>
<div id="form-gallery"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="videoTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Video</h3>
<div id="form-video"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="diaryTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Diary</h3>
<div id="form-diary"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>

<div id="messagingTab">
<div style="width:600px;margin: 8px;">
<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 style="margin-bottom:5px;">Messaging</h3>
<div id="form-messaging"> </div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</div>
</div>
</div>