cfExt Form Additions

Word Count: 464

Earlier today I posted some examples of forms and how easy they are to create. I got a couple comments about radio buttons and more specifically radio groups. Out of the box Ext does not come packaged with any group functionality for radio buttons. Fortuantly for us a user by the name of Robert Williams created a nice extension for everyone to use. The radio group extension allows our form to act more like an HTML form would. Tonight I sat down and plugged all of this magic into my cfExt library and I would like to share a couple examples with you.

This example shows how to quickly create radio groups. The only two attributes you need to provide are field label and name. The field label is what will describe the radio boxes and the name is html element name.

<ext:form id="rgtest" title="Radio Group Test" display="form1" width="400" collapsible="true" fieldWidth="250">
               
   <ext:input type="hidden" name="id" value="1"/>
   <ext:input type="text" name="first" label="First Name" required="false"/>
   <ext:input type="text" name="last" label="Last Name" required="false"/>
   <ext:input type="text" name="company" label="Company" />
   <ext:input type="text" name="email" label="Email"/>
   
   <ext:radioGroup fieldLabel="Sex" name="sex">
      <ext:radio value="m" boxLabel="Male" checked="true"/>
      <ext:radio value="f" boxLabel="Female"/>         
   </ext:radioGroup>
   
   <ext:radioGroup fieldLabel="Favorite Color" name="favcolor">
      <ext:radio value="red" boxLabel="Red" checked="true"/>
      <ext:radio value="blue" boxLabel="Blue"/>
      <ext:radio value="green" boxLabel="Green"/>
      <ext:radio value="orange" boxLabel="Orange"/>
      <ext:radio value="yellow" boxLabel="Yellow"/>
      <ext:radio value="purple" boxLabel="Purple"/>                     
   </ext:radioGroup>
   
   
   <ext:button text="Cancel"/>
   <ext:button type="submit" text="Save" onClick="simpleForm.form.submit()"/>
   
</ext:form>

And here is another example, this time assigning the attribute horizontal to true. This will lay out our radio box in a row instead of the vertical default.

<ext:form id="rghor" title="Radio Group Horizontal Test" display="form2" width="400" collapsible="true" fieldWidth="250">
               
   <ext:input type="hidden" name="id" value="1"/>
   <ext:input type="text" name="first" label="First Name" required="false"/>
   <ext:input type="text" name="last" label="Last Name" required="false"/>
   <ext:input type="text" name="company" label="Company" />
   <ext:input type="text" name="email" label="Email"/>
   
   <ext:radioGroup fieldLabel="Sex" name="sex" horizontal="true">
      <ext:radio value="m" boxLabel="Male" checked="true"/>
      <ext:radio value="f" boxLabel="Female"/>         
   </ext:radioGroup>
   
   <ext:radioGroup fieldLabel="Favorite Color" name="favcolor" horizontal="true">
      <ext:radio value="red" boxLabel="Red" checked="true"/>
      <ext:radio value="blue" boxLabel="Blue"/>
      <ext:radio value="green" boxLabel="Green"/>
      <ext:radio value="orange" boxLabel="Orange"/>                     
   </ext:radioGroup>
   
   
   <ext:button text="Cancel"/>
   <ext:button type="submit" text="Save" onClick="simpleForm.form.submit()"/>
   
</ext:form>

So thats all there is to it, these forms are really starting to take shape. If you checkout the svn source I also have some examples in there for a checkbox and drop down. You can check out a live demo of this code below.

cfExt Project Page on RIAForge

Radio Groups Example

Comments

#1 Posted By: Micah Posted On: 2/1/08 12:45 AM
Great example. Thanks. It looks good and works well in FireFox 2 but IE7 is throwing and error and won't dispay anything.
#2 Posted By: Jeff Knooren Posted On: 2/1/08 8:26 AM
That is pretty cool. I have no idea my suggestions are even possible with the EXT library. But here is a screenshot to explain:

http://www.newbie.org/firefox/images/SingleWindowM...

This is called "Progressive Display" where clicking the checkbox reveals yet more things to select. Also, a different way to lay out fields when the simple layouts just don't provide enough info. Something like this:

http://s27.photobucket.com/albums/c185/compugasm/M...

Where you have the field name on one line, some help text on a second line, and finally the field on a third line.

Like I said, it probably isn't possible with EXT, but it would make the forms more useful. That is my .02
#3 Posted By: Dan Vega Posted On: 2/1/08 9:14 AM |
Author Comment
@Micah - I know why it was not working in IE 7 and I will fix it tonight.

@Jeff - I really like your first example. After the core is up to a working release I think I will revisit this as it would be a nice feature. Ill start digging through the Ext forums!
#4 Posted By: Dan Vega Posted On: 2/1/08 3:25 PM |
Author Comment
testing remember me.
#5 Posted By: Andy Posted On: 2/3/08 1:27 PM
Hi Dan,

it not working in IE 6, also when i am trying to submit form nothing happened?

Cheers,
Andy
#6 Posted By: Dan Vega Posted On: 2/4/08 11:24 PM |
Author Comment
Andy,
I am not sure why it is not working in IE6 but the code is changing so much I will make sure it is resolved before I put the next download together. I know that the form does not do anything yet. I have not figured out how I want to handle form submissions just yet.
#7 Posted By: Michael Evangelista Posted On: 2/12/08 1:06 PM
Hi Dan -

I have been spending some time directly in Ext-land, trying to sort the syntax for creating forms 'by hand' .. so far so good, but for the submitting part... there must be something I am missing, because it seems awfully unintuitive, creating a button, adding a custom function to submit the form... and still I am not getting syntax quite right, or I need more sleep, or something.

Have you sorted how you plan to handle submitting your forms?

Also - what is the 'anchor:95%' in your generated js? I searched the Ext api for 'anchor', but all I can find is 'anchorTo'

thanks
#8 Posted By: Shane McMurray Posted On: 2/12/08 4:19 PM
Just FYI: with the basic form test, the validate stuff doesn't seem to work in firefox. and on the IE 6 issue, it looks like it is erroring at: events is null or not an object.

Great job! This is very nice as compared to writing the full extjs code.
#9 Posted By: Shane McMurray Posted On: 2/12/08 6:15 PM
Ah... the sample has "allowBlank=" (for extjs directly) and the attribute for CFM is "required"... that works...
#10 Posted By: butter Posted On: 6/17/08 6:59 PM
great -- but can these be used to crete forms on everything ??? sites --blogs ? anything
#11 Posted By: eremiya Posted On: 6/25/08 6:36 AM
Hi,
Thanks a lot for the cfext project. It's rock solid.
I tried to put together a form with the cfext lib, and tried to submit the form. It was quite complicated. I am a newbie in that domain, but this is the method I used:

a init function:
function init(){
Get my button object
var myButton = Ext.get('submit');

//Get my Form object
var myForm = Ext.get('myForm');

//an event listener on the button
myButton.on('click',sendForm);

//the handler   
function sendForm()
{
   theForm = document.getElementById("ext-gen22");
   theForm.action = 'test.cfm';
   Ext.Msg.alert('Info', theForm.action);
   theForm.submit();
}

Notice that with the var myForm, I cannot send the form. in fact, var myForm is equal to myForm.getForm().getEl() where myForm is also the name of my form (hope you can follow).

So I had to check (using firebug) what is the name of the form generated by the code (in my script: ext-gen22) and submit it using normal js.

Another thing is when I debug, the form created has no action parameter. Whatever I tried, it won't work.

Anyway, I got the form submitted, so I am quite happy, but I am on the good path here, or is there a better way?

Thanks a lot!
#12 Posted By: Dan Vega Posted On: 6/25/08 1:10 PM |
Author Comment
Jeremie can you email me the code for the form you are trying to put together? There are still some wholes in the project and I am no expert by any means. If you need to get the actual component you can use Ext.getCmp("id").


Post Your Comment







Show Captcha

If you subscribe, any new posts to this thread will be sent to your email address.

Copyright © 2007 Dan Vega | BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.