All about Ext.FormPanel !

Forms are very important part of a web application. As they play a major role in date collection and manipulation, designing a fully functional form becomes a challenging task. Ext provides all necessary widget required to build complex forms in a simple way. It also has a good validation, submit and data load functionality. I will cover creating and submitting of forms.



In ExtJs, forms are classes derived from Panel and the library provides two ways to build a form: BasicForm and FormPanel. We will see how to build a form using FormPanel.

The Basics:
Ext provides form related class under the package Ext.form. Creating a form starts with instantiating an object of FormPanel. Like any Ext component, the constructor accepts the configuration of the component you are creating. A simple form creation will look like this:

panelObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),
title:'A simple form'
});

Wait! Running this, you will end up in error!!! Even though the above code is enough to create a panel, forms need more configurations. So what is the way out? For this you need to know some of the configuration option available with Ext forms. Below are some important config options:

• applyTo – Like any component, you need to specify id of the node for the component to render.
• autoLoad – A valid url for form to load data on render.
• Buttons – Specify all the buttons required for the form (Buttons can be added to bbar also).
• frame – Used to specify if the form needs rounded borders.
• id – Unique id of the component.
• items – A very important config. Without this there is no form! You specify all your form elements in this.
• labelAlign – Specify the alignment of labels of the form elements.
• labelWidth – Specify the width of each label.
  

You will find many other config options. Most of them are already available in normal form and I will skip them.

Form Elements:
You don’t have a form without form elements. Below is the list of elements you can add to a form through the items config option:

• Checkbox – A simple checkbox. It also has its own configuration options, so have a look at the API.
• ComboBox – A combo box control with support for autocomplete, remote-loading, paging and many other features.
• DateField – A date input field with a date picker dropdown and automatic date validation.
• HtmlEditor – A lightweight HTML Editor component.
• NumberField – Provides a Numeric text field that provides automatic keystroke filtering and numeric validation.
• Radio – Provides a simple radio button.
• TextArea – Provides a multi line text input.
• TextField – Provide a simple single line text input.
• TimeField – Provides a time input field with a time dropdown and automatic time validation.

Now, let’s build a simple form.

First ExtJS form:
To complete to coding of our first form, we need to add some elements using the items config. option. In our form we will have just two elements: a text field and text area. Have a look at the code below:

panelObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),
title:'A simple form',
height:170,
labelWidth:60,
items:[new Ext.form.TextField({id:'tf',
name:'uname',
inputType:'text',
fieldLabel:'Name'
}),new Ext.form.TextArea({id:'ta',
name:'addr',
fieldLabel:'Address',
height:70,
width:150
})],
bbar:[{text:'Submit',handler:buttonHandler}]
});

In this form, there is not complexity. Please refer to documentation for options of each element so that you can configure them to your needs. An important point to note here is how elements are created in the items option. Notice that each element is instantiated and its config options passed. If you don’t use new operator, you will end up a form without the element displayed.

A design tip in forms is not to have clear button along with your submit. When users click clear, all the elements of the form is cleared. Practically users don’t clear all the fields (except for BPO and support staffs that need data cleared at end of each session) and forms should be designed in a way where users spend less time filling it.

Submitting a form:
When I created form, building them took less time when compared to learning how to submit them! But now, I will make things simple for you. You would have noticed that we didn’t specify any action url, or method to send data across to the server side.

Ext makes use of Ajax to send form data across. It uses Ext.form.Action class to submit data. An important config option that we did not include in FormPanel was URL information. This can be configured using the url attribute. The form is submitted and data transferred when you hit the submit button. The corresponding button click handler method will invoke the submit action. Have a look at our final code:

app = function() {

var formObject;

var buttonHandler = function(button,event) {
formObject.form.submit({url:'FormAction', 
waitMsg:'Saving Data...',
success:doneFunction
});
};  

var doneFunction = function(form,action) {
alert("success");
}

return {

init:function() {

formObject = new Ext.form.FormPanel({applyTo:Ext.getBody(),
title:'Sample form',
height:300,
contentEl:'panel1',
labelWidth:60,
frame:true,
collapsible:true,
items:[new Ext.form.TextField({id:'tf',
name:'uname',
allowBlank:false,
inputType:'text',
fieldLabel:'Name
}),new Ext.form.TextField({id:'pa',
name:'password',
inputType:'password',
fieldLabel:'Password'
})],
buttons:[{text:'Submit',handler:buttonHandler}] 
});              
}   
};
}();

You can download the complete code and play with it. I prefer you play lot with different element to get comfortable with forms.

Wrapping up:
Like I promised, this is my second post of "All About…" series and more will come. For those who have missed, have a look at my post about Ext.Buttons. Till next post; happy programming!

Read other articles on ExtJS!