Ext Forms Using cfExt

01/31/2008 | ExtJS, ColdFusion | 12 Comments

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.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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> 1<ext:application path=".">
2
3    <ext:form id="simpleform" title="Simple Form" display="form1" width="400" collapsible="true" fieldWidth="250">
4            
5        <ext:input type="hidden" name="id" value="1"/>
6        <ext:input type="text" name="first" label="First Name" required="false"/>
7        <ext:input type="text" name="last" label="Last Name" required="false"/>
8        <ext:input type="text" name="company" label="Company" />
9        <ext:input type="text" name="email" label="Email"/>
10        <ext:input type="time" name="time" label="Time" min="8:00am" max="5:00pm"/>
11        <ext:input type="date" name="date" label="Date"/>
12        <ext:textarea name="ta" label="Notes"/>
13        
14        <ext:button text="Cancel"/>
15        <ext:button type="submit" text="Save" onClick="simpleForm.form.submit()"/>
16        
17    </ext:form>
18</ext:application>
19
20<div id="form1" style="margin:20px;">
21</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.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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> 1<ext:combobox name="favnumber" label="Favorite Number" emptyText="[ Select Your Favorite Number]">
2    <cfloop from="1" to="100" index="i">
3    <ext:option value="#i#"><cfoutput>#i#</cfoutput></ext:option>
4    </cfloop>
5</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.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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> 1<ext:application path=".">
2<ext:form title="Simple Form with Fieldsets" display="form2" width="400" collapsible="true">
3    
4    <ext:fieldset title="User Information" checkboxToggle="true" fieldWidth="225">
5        <ext:input type="text" name="first" label="First Name" allowBlank="false"/>
6        <ext:input type="text" name="last" label="Last Name" allowBlank="false"/>
7        <ext:input type="text" name="company" label="Company"/>
8        <ext:input type="text" name="email" label="Email"/>
9    </ext:fieldset>
10    
11    <ext:fieldset title="Phone Numbers" collapsible="true" fieldWidth="225">
12        <ext:input type="text" name="home" label="Home"/>
13        <ext:input type="text" name="business" label="Business"/>
14        <ext:input type="text" name="mobile" label="Mobile"/>
15        <ext:input type="text" name="fax" label="Fax"/>
16    </ext:fieldset>            
17    
18    <ext:button text="Cancel"/>
19    <ext:button text="Save"/>
20    
21</ext:form>
22</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.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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> 1<ext:form title="Mult Column, Nested Layouts and Anchoring" display="form3" width="600" collapsible="true" labelAlign="top">
2    
3    <ext:columns>
4        <ext:column width=".5">
5            <ext:input type="text" name="first" label="First Name" anchor="95%"/>
6            <ext:input type="text" name="last" label="Last Name" anchor="95%"/>
7        </ext:column>
8        <ext:column width=".5">
9            <ext:input type="text" name="company" label="Company" anchor="95%"/>
10            <ext:input type="text" name="email" label="Email" anchor="95%"/>
11        </ext:column>
12    </ext:columns>    
13    
14    <ext:htmlEditor label="Biography" height="400"/>
15    
16    <ext:button text="Cancel"/>
17    <ext:button text="Save"/>
18                
19</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.

view plain copy to clipboard print about

  ColdFISH is developed by Jason Delmore. Source code and license information available at coldfish.riaforge.org
<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> 1<ext:form title="Inner Tabs" display="form4" width="600" collapsible="true" labelAlign="top">
2    
3    <ext:columns>
4        <ext:column width=".5">
5            <ext:input type="text" name="first" label="First Name" anchor="95%"/>
6            <ext:input type="text" name="last" label="Last Name" anchor="95%"/>
7        </ext:column>
8        <ext:column width=".5">
9            <ext:input type="text" name="company" label="Company" anchor="95%"/>
10            <ext:input type="text" name="email" label="Email" anchor="95%"/>
11        </ext:column>
12    </ext:columns>    
13    
14    <ext:tabPanel height="250">
15        <ext:tab title="Personal Details" width="230" layout="form">
16            <ext:input name="firstName" label="First Name"/>
17            <ext:input name="lastName" label="Last Name"/>
18            <ext:input name="company" label="Company"/>
19            <ext:input name="email" label="Email Address"/>
20        </ext:tab>
21        <ext:tab title="Phone Numbers" width="230" layout="form">
22            <ext:input name="home" label="Home"/>
23            <ext:input name="business" label="Business"/>
24            <ext:input name="mobile" label="Mobile"/>
25            <ext:input name="fax" label="Fax"/>
26        </ext:tab>
27        <ext:tab title="Biography" layout="fit">
28            <ext:htmlEditor label="Biography" height="200"/>
29        </ext:tab>
30    </ext:tabPanel>
31
32    
33    <ext:button text="Cancel"/>
34    <ext:button text="Save"/>
35                
36</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

 

This entry was posted on January 31, 2008 at 5:26 PM and has received 10581 views. Comments 12 | Print this entry.

 

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

• #1 by Sammy Larbi 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 by Sammy Larbi 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 by Chris Dawes 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 by Miichael Evangelista 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 by Dan Vega on 1/31/08 - 10:48 PM

  

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

• #6 by dave on 2/1/08 - 12:06 AM

  

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

• #7 by dave on 2/1/08 - 1:26 AM

  

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

• #8 by Archie Neisz on 2/1/08 - 11:07 AM

  

  Thanks!

• #9 by eremiya 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 by eremiya on 7/13/08 - 11:14 PM

  

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

• #11 by Dan Vega on 7/15/08 - 4:45 PM

  

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

• #12 by Keith Blanchard on 12/3/09 - 4:47 PM

  

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