PDA

View Full Version : Values not captured from HTML form in Ext Panel



carze
8 Nov 2010, 6:33 PM
Hey all, I've inherited a project recently that requires me to clean up a very long form and I wanted to use some of the useful ExtJS layouts to help me do this. My first thought was to make extensive use of the accordion layout to group together similar fields before I saw the form example using the checkboxToggle. Before I spend a decent amount of time converting the whole thing to Ext I was wondering if anyone could give me any insight on whether it is possible to keep the HTML form and wrap it into Ext objects.

My first pass at this consisted of grouping together fields in HTML fieldsets and pulling this into a Panel which contained items of fieldset type (with the checkboxToggle enabeld). It looked great but upon submitting the HTML form it looks like none of the form fields are getting captured.

Anyone have any thoughts on why this might not be working? My guess is that the nested forms/fieldsets are wrecking havoc but I would like some educated opinions prior to embarking on a total re-write. Thanks a ton!

darthwes
8 Nov 2010, 8:43 PM
Sounds like you need to make one form of all the elements? Are you trying to use the Ext.BasicForm.submit function? Code?

Condor
8 Nov 2010, 11:44 PM
Are you sure your fields are still inside your <form> tag? Or did you accidentally move them by Ext'ifying them?

carze
9 Nov 2010, 5:52 AM
darthwes and Condor: All the elements are wrapped in one HTML form. They are subdivided into fieldset groups so I'm not sure if that has anything to do with my parameters not being captured.

Here is a snippet of the HTML code:

<form id="arc3_form" method="post" enctype="multipart/form-data" onsubmit="return loadExtResults(this)">

<fieldset id="subject_div">
<!-- Subject ID -->
<span
style="font-family: Arial,Helvetica,sans-serif; font-style: normal; font-weight:normal; font-variant: normal;">Subject ID</span><BR>
<input name="subject_id">
<br>
<br>

Here is the Ext code that wraps the form elements in the field set and places them into a Panel that has items of xtype fieldset that have the checkboxToggle functionality I am looking for:

var queryPanel = new Ext.Panel({
id: 'arc3Query',
title: 'Query',
cls: 'empty',
autoHeight: true,
bodyStyle: 'padding: 10px 10px 10px 10px',

items: [{
xtype: 'fieldset',
id: 'arc3SubjectToggle',
checkboxToggle: true,
title: 'Subject',
collapsed: false,
contentEl: 'subject_div'
},{

This is extremely messy code but I am sort of time-constrained on this project at the moment and if possible would like to leave as much as the original code intact.

Thanks for all the help so far.

carze
9 Nov 2010, 6:16 AM
Upon further examination it looks like the form is getting cut off shortly and not encompassing the the input fields once they have been wrapped in Ext objects themselves. Should I be wrapping everything in another Panel here to ensure that the form is captured?



Ext Panel:
Form:
Ext Panel(s): Input Fields

Condor
9 Nov 2010, 6:30 AM
Using contentEl will move the element inside the panel. This only works if the outer wrapping panel is rendered to the form.

carze
9 Nov 2010, 6:40 AM
Is it possible to render a panel to a form? Sounds kind of weird to be able to do so.

Condor
9 Nov 2010, 6:43 AM
Sure, just render queryPanel to 'arc3_form'.

carze
9 Nov 2010, 6:47 AM
You rock Condor :)

Everything works perfectly in this cobbled mess of Ext and HTML. I can't thank you enough!

darthwes
9 Nov 2010, 7:31 AM
Use Condor's body to keep you alive.