A reader had a couple of questions on Ext forms recently so I thought I would throw a quick tutorial together. This will by no means show you all of the features of the form classes but should give you a quick intro. The first thing people ask is why do I need forms in Ext, I can create them just fine using HTML. While this is true Ext makes it easy to submit the contents of the form using Ajax. When developers start taking a look at the form classes it really comes down to 3 things.
  • How do I create & customize forms
  • How do I submit the forms using AJAX
  • How can I load form data using AJAX
I am going to cover the first one in this post but I will follow it up with a posts on how to submit and load data in the near future. Creating forms is really not that hard once you know all the players. Your first assignment is head over to the Ext website where I found 2 very good articles. Tutorial : Getting Started with Forms
Loading & Submitting Data Now that we have a little introduction into forms lets start coding. The first thing we need to do is include our JavaScript and css files. For this example we will just include everything. Ext Includes Create a Form Panel instance While this does not do much this will get you started. Next we need to add some configuration to our form. The first thing to understand is that the FormPanel class extends Panel so many configuration options / methods / events come from the Panel class. Here are some of the main configuration options that we are going to use in our example.
  • id - The unique id of this component (defaults to an auto-assigned id)
  • renderTo - The id of the node, a DOM node or an existing Element that will be the container to render this component into.
  • title - The title text to display in the panel header
  • width - The width of this component in pixels
  • frame - True to render the panel with custom rounded borders, false to render with plain 1px square borders (defaults to false).
  • items - A single item, or an array of child Components to be added to this container. Each item can be any type of object based on Ext.Component.
  • buttons - An array of Ext.Button configs used to add buttons to the footer of this panel.
This really just sets up the container for our form. Now we to start adding form fields to our form. There are 2 ways to go about adding form items. We can add them in the constructor using the items attribute or we can use the add method from the FormPanel class. I actually prefer the inline method so thats how my example will look. Before we go adding fields we need to take a look at what type of fields we can add. Here are a list of different classes that we have access to.
  • Checkbox - Single checkbox field. Can be used as a direct replacement for traditional checkbox fields.
  • Combobox - A combobox control with support for autocomplete, remote-loading, paging and many other features.
  • DateField - Provides a date input field with a Ext.DatePicker dropdown and automatic date validation.
  • Field - Base class for form fields that provides default event handling, sizing, value handling and other functionality.
  • FieldSet - Standard container used for grouping form fields.
  • Hidden - A basic hidden field for storing hidden values in forms that need to be passed in the form submit.
  • HtmlEditor - Provides a lightweight HTML Editor component.
  • NumericField - Numeric text field that provides automatic keystroke filtering and numeric validation.
  • Radio - Single radio field. Same as Checkbox, but provided as a convenience for automatically setting the input type. Radio grouping is handled automatically by the browser if you give each radio in a group the same name.
  • TextArea - Multiline text field. Can be used as a direct replacement for traditional textarea fields, plus adds support for auto-sizing.
  • TextField - Basic text field. Can be used as a direct replacement for traditional text inputs, or as the base class for more sophisticated input controls (like Ext.form.TextArea and Ext.form.ComboBox).
  • TimeField - Provides a time input field with a time dropdown and automatic time validation.
  • Provides a convenient wrapper for TextFields that adds a clickable trigger button (looks like a combobox by default).
As I said before I prefer setting my items up inline so here is my final code that adds some form items to my form. A couple notes from the code above. The first is the allowBlank attribute is a way to make feilds required. If allowBlank is false then you should provide a blankText attribute to display a message when that field is left blank. The vType and vtypeText are ways to provide custom validation. If you look through the documentation you can learn more about that. Finally the msgTarget is where you are going to display the error messages. Valid options are "qtip,title,under,side,elementId". Here is what our form looks like. In the next article we will look at submitting the form data and actually doing something with it.
 

This entry was posted on February 14, 2008 at 10:00 AM and has received 81497 views. Comments 11 | Print this entry.