cfExt Form Additions
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: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: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



