danvega.org: Ext Forms Using cfExt

Ext Forms Using cfExt

Thursday January 31, 2008 4:26 PM

Word Count: 956

I have been adding away whenever I get a chance and this library is starting to grow. Today I want to walk through on how I have implemented forms as well get your thoughts on a couple of things. If you skip to the bottom there is a link to the live example of what I am talking about in this article. If you have been reading my examples up until now then you know the base of our application is the ext:application tag. This is an example of a very basic form. As you can the syntax is very clean and the end result is pretty nice. Once you have a form there are some pretty cool things you can do with it and I'll save that for a rainy day. You will notice we make use of hidden, text, date, time and textarea form fields. I pushed many items into a tag called input to try and make it similar to HTML.

<ext:application path=".">

   <ext:form id="simpleform" title="Simple Form" 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:input type="time" name="time" label="Time" min="8:00am" max="5:00pm"/>
      <ext:input type="date" name="date" label="Date"/>
      <ext:textarea name="ta" label="Notes"/>

      <ext:button text="Cancel"/>
      <ext:button type="submit" text="Save" onClick="simpleForm.form.submit()"/>

   </ext:form>
</ext:application>

<div id="form1" style="margin:20px;">
</div>

How about a combo box? In Ext you can load the combo box using JSON but for now I have implemented the static route and the data version should be coming soon. Here is how to add a combo box, pretty easy huh.

<ext:combobox name="favnumber" label="Favorite Number" emptyText="[ Select Your Favorite Number]">
   <cfloop from="1" to="100" index="i">
   <ext:option value="#i#"><cfoutput>#i#</cfoutput></ext:option>
   </cfloop>
</ext:combobox>

This next example is really cool. First off you will notice the use of field sets. The cool part about field sets in Ext is that you can collapse them using a collapse tool or by toggle the the field set with a checkbox.

<ext:application path=".">
<ext:form title="Simple Form with Fieldsets" display="form2" width="400" collapsible="true">

   <ext:fieldset title="User Information" checkboxToggle="true" fieldWidth="225">
      <ext:input type="text" name="first" label="First Name" allowBlank="false"/>
      <ext:input type="text" name="last" label="Last Name" allowBlank="false"/>
      <ext:input type="text" name="company" label="Company"/>
      <ext:input type="text" name="email" label="Email"/>
   </ext:fieldset>

   <ext:fieldset title="Phone Numbers" collapsible="true" fieldWidth="225">
      <ext:input type="text" name="home" label="Home"/>
      <ext:input type="text" name="business" label="Business"/>
      <ext:input type="text" name="mobile" label="Mobile"/>
      <ext:input type="text" name="fax" label="Fax"/>
   </ext:fieldset>

   <ext:button text="Cancel"/>
   <ext:button text="Save"/>

</ext:form>
</ext:application>

The next example shows how you can lay your fields out using a column style layout. This example also shows you the Ext HTML Editor. Again, the code could not get any easier.

<ext:form title="Mult Column, Nested Layouts and Anchoring" display="form3" width="600" collapsible="true" labelAlign="top">

   <ext:columns>
      <ext:column width=".5">
         <ext:input type="text" name="first" label="First Name" anchor="95%"/>
         <ext:input type="text" name="last" label="Last Name" anchor="95%"/>
      </ext:column>
      <ext:column width=".5">
         <ext:input type="text" name="company" label="Company" anchor="95%"/>
         <ext:input type="text" name="email" label="Email" anchor="95%"/>
      </ext:column>
   </ext:columns>

   <ext:htmlEditor label="Biography" height="400"/>

   <ext:button text="Cancel"/>
   <ext:button text="Save"/>

</ext:form>

Finally this example shows how layouts can be combined with forms to create easy to use interfaces. This form has a section at the bottom that contains tabs.

<ext:form title="Inner Tabs" display="form4" width="600" collapsible="true" labelAlign="top">

   <ext:columns>
      <ext:column width=".5">
         <ext:input type="text" name="first" label="First Name" anchor="95%"/>
         <ext:input type="text" name="last" label="Last Name" anchor="95%"/>
      </ext:column>
      <ext:column width=".5">
         <ext:input type="text" name="company" label="Company" anchor="95%"/>
         <ext:input type="text" name="email" label="Email" anchor="95%"/>
      </ext:column>
   </ext:columns>

   <ext:tabPanel height="250">
      <ext:tab title="Personal Details" width="230" layout="form">
         <ext:input name="firstName" label="First Name"/>
         <ext:input name="lastName" label="Last Name"/>
         <ext:input name="company" label="Company"/>
         <ext:input name="email" label="Email Address"/>
      </ext:tab>
      <ext:tab title="Phone Numbers" width="230" layout="form">
         <ext:input name="home" label="Home"/>
         <ext:input name="business" label="Business"/>
         <ext:input name="mobile" label="Mobile"/>
         <ext:input name="fax" label="Fax"/>
      </ext:tab>
      <ext:tab title="Biography" layout="fit">
         <ext:htmlEditor label="Biography" height="200"/>
      </ext:tab>
   </ext:tabPanel>


   <ext:button text="Cancel"/>
   <ext:button text="Save"/>

</ext:form>

I think I have a great foundation of code to build on now. The really great thing is the way the core has been implemented. This will allow for everything to fit together just nice. When I got to the forms section I took a look at examples and he had some right ideas there so I ran with them. The final thing with the forms is going to get the submit handler working. I know how to submit the forms its just a matter of how it should be implemented for those who know nothing about Ext. Anyone with ideas of how it should work I would love to hear them. Based on that Ill figure out how to write the back end code. If you have a chance download the code using the link below and give me your feedback. Also there is a link to a live demo of the forms talked about in this article. cfExt Project Page on RIAForge
Dynamic Forms Example

6427 Views

Comments

#1 Posted By: Sammy Larbi Posted On: 1/31/08 5:38 PM

Cool stuff.

I was going to leave a comment saying how it would be nice to see the code samples for each form you constructed, but as it turns out you have shown the code. =)

Instead, I'll just say its not coming through in the RSS. =)

#2 Posted By: Sammy Larbi Posted On: 1/31/08 5:41 PM

Oh, I also wanted to ask how (or if) you handle radio buttons and checkboxes, and what those examples look like?

(The remember my info doesn't seem to be working on the comments either - I'm using FF on MacOSX)

#3 Posted By: Chris Dawes Posted On: 1/31/08 6:21 PM

While ext has radio buttons, radio groups are not part of the core, there is an extension that allows you to do this.

#4 Posted By: Miichael Evangelista Posted On: 1/31/08 9:42 PM

Dan - this is looking great!
And I so totally dig the way those ext forms are put together... and all that style by default!

I'm sure I am just one of many who are excited to see your progress on this... very nice.

#5 Posted By: Dan Vega Posted On: 1/31/08 10:48 PM |

Author Comment

I plugged in the Radio Group class tonight and it works like a charm. Ill post something shortly on it.

#6 Posted By: dave Posted On: 2/1/08 12:06 AM

is it possible to do server-side validation with these?

#7 Posted By: dave Posted On: 2/1/08 1:26 AM

i cant find much on the ext site about file fields, any idea?

#8 Posted By: Archie Neisz Posted On: 2/1/08 11:07 AM

Thanks!

#9 Posted By: eremiya Posted On: 7/7/08 3:54 AM

Hi Dan,
eremiya again. I have a question: Is it possible to loop a custom tag?
Let's say I have a form, and in it a cfloop to dynamically create cf_input. I have a error saying that the tag is not showing any data because the tag is not defined...

Does anyone has the same issue? Here is my code:

<cfscript>
   maincfc = createObject("component","cfc.resa");
   reservedtables = maincfc.getTablesByNo(#URL.id#);
</cfscript>

<html>
<head>
   <title>Basic Form Test</title>
</head>

<body>

<cf_application path="../ext">

   <cf_form id="simipleForm" display="form1" bodyStyle="padding:10px;" defaults="{width:250}" collapsible="false" buttonAlign="right">

   <cfloop query="reservedtables">
      <cf_input type="text" name="first" label="First Name" required="true" message="Please Enter First Name"/>
   </cfloop>

   <cf_button type="submit" text="Save" />

</cf_form>

</cf_application>

<div id="form1" style="margin:20px;">
</div>

</body>
</html>

Without the cfloop tag, no problem.
Strange thing is that there is no problem with a cfif tag...

Sorry for the newbie's question again.
eremiya

#10 Posted By: eremiya Posted On: 7/13/08 11:14 PM

Hi,
Did you had a chance to take a look at that issue?

#11 Posted By: Dan Vega Posted On: 7/15/08 4:45 PM |

Author Comment

I am sorry, I have been so busy I just have not had a chance.

#12 Posted By: Keith Blanchard Posted On: 12/3/09 4:47 PM

Not a good idea. You should just code your app in JavaScript.

Ext Forms Using cfExt

Comments

Post Your Comment

Navigation

Tagcloud

Archives

Blogs I Read

Recent Entries

Recent Comments

About

Stay Upated