Among the many types of panels that ExtJS offers, we have the Ext.FormPanel component, a component that provides all the functionality of a common form in HTML but with methods and specific functions of ExtJS. The component Ext.FormPanel has a default type of design ("layout") called "form", this design intelligently aligns each of the components (label-component) of the form. The unique characteristic of the Ext.FormPanel is that it already has implemented the saving and loading data process in a way that is very secure and completely configurable.

Resources

Go ahead and download the resources for this tutorial, unzip the file and create a folder called "forms" inside of the folder "course" (which is the folder we've been working on), then copy the files you unzipped to the new folder. The goal is that by the end of the chapter "Forms", we have a form that works perfectly with all relevant features and validations.

Packaging the tutorial

We need to package the code to avoid conflicts with other variables.

 
Ext.ns('com.quizzpot.tutorial');

Ext.BLANK_IMAGE_URL = '../ext-3.0/resources/images/default/s.gif';

com.quizzpot.tutorial.FormTutorial = {
	init: function(){
		//code here
	}	

}

Ext.onReady(com.quizzpot.tutorial.FormTutorial.init,com.quizzpot.tutorial.FormTutorial);

Form

Now we will build a form with the most common fields; two text fields, a checkbox group, a hidden field, a group of radio buttons and two buttons. First we need to create a form where the fields will be set so the user can enter the necessary information, we do this as follows:

//creamos un formulario 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	//component by default of the form
	bodyStyle:'padding: 10px', //adding padding for the components of the form
	html: 'This form is empty!' //<-- in the next step we will remove this property
});

The forms inherit properties and methods from the component "Ext.Panel", that's why the configuration we've made looks familiar, if you can't remember about this then I suggest you to take a look at the chapter "Panels". With the property "defaults" we can define the properties we want to be applied on the components that the Form component has, in this case we just define the "xtype" to "textfield", this means that the default fields of this form will be Texfields. The previous code generates the following screen: At this point there is no visual difference between a form and a panel, this is because we haven't added any field yet, let's see in detail the most common components below.

Text fields

As seen in previous tutorials, we can create components using the keyword "new" and the component we need to instantiate, or we can create them through configuration objects using the property "xtype" to distinguish between the available components. The component that lets us create text boxes is "Ext.form.TextField" and the "xtype" is "textfield", for example:

 
//creating an instance of textfield
var name = new Ext.form.TextField({ 
	fieldLabel:'Name', 
	name:'txt-name', 
	emptyText:'Your name...', 
	id:"id-name" 
}); 

//creating a form
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	//component by defaul of the form
	bodyStyle:'padding: 10px', //adding padding for the components of the form		 
	items:[ 
		name, //adding the instance we created previously
		{ 
			fieldLabel:'Email', // we can create a component 
			name:'txt-email', // with a configuration
			value:'default@quizzpot.com', //object
			id:"id-email" 
		} 
	] 
});

In the previous code we've created two text fields in two different ways, one using an instance of the TextField component and the other one is using a configuration object, each developer can choose the option that suits him/her better depending on the circumstances. In the following list I will mention the properties that we use: "fieldLabel": This property defines the text that accompanies each component of the form. "emptyText": This property defines the text that the field will contain when it is empty. "name": is the name by which the data (that contains the fields) is sent to the server, is exactly like the "name" we normally use in common forms. "value": is the default value that appears in the component, useful when we want to edit a record and display information that is currently captured.

Checkbox

The checkboxes are used to select one or more items from a list, or simply to activate or deactivate any flag or permission in a system, for this example I'll put a field that is called "active" using a configuration object, we can also do this by instantiating the component "Ext.form.Checkbox".

 
// code remove to keep the it simple...

//creating a form
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 		 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //defining the type of component
			fieldLabel: 'Active',//assigning a label
			name: 'chk-active', //and a "name" so we can retrieve it in the server... 
			id: 'id-active'// ...when the form is sent
		} 
	] 
});

On the other hand, when we want to group multiple check boxes we need to use the component "Ext.form.CheckboxGroup" which allows an easy handling of any number of checkboxes.

 
//creating a group of checkboxes
var checkboxes = new Ext.form.CheckboxGroup({ 
	fieldLabel:'Interests', 
	columns:2,//showing two columns of checkboxes						 
	items:[ 
		{boxLabel: 'JavaScript', name: 'cb-js', checked: true}, //field checked from the beginning
		{boxLabel: 'HTML', name: 'cb-html'}, 
		{boxLabel: 'CSS', name: 'cb-css'}, 
		{boxLabel: 'Otros', name: 'cb-otros'} 
	] 
});

//creating a form
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 	 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email',
			value:'default@quizzpot.com',
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //defining the type of component
			fieldLabel: 'Active',//assigning a label
			name: 'chk-active', //and a "name" so we can retrieve it in the server... 
			id: 'id-active'// ...when the form is sent
		}, 
		checkboxes //<-- group of checkboxes 
	] 
});

The groups of checkboxes accept the property "items" which should contain an array of configuration objects or instances of the checkbox.

Radio buttons

The radio buttons are used to select a single choice of several items, this component is created very similar to the checkboxes, except that we use the component "Ext.form.RadioGroup" to group multiple radios.

 
//code remove to keep it simple

//creating a group of radiobuttons 
var radios = new Ext.form.RadioGroup({ 
	fieldLabel: 'Favorite Framework',		                
     columns: 2, //display the radiobuttons in two columns 
     items: [ 
          {boxLabel: 'Ext Js', name: 'framework', inputValue: 'Ext js', checked: true}, 
          {boxLabel: 'Dojo', name: 'framework', inputValue: 'Dojo'}, 
          {boxLabel: 'Mootools', name: 'framework', inputValue: 'Mootools'}, 
          {boxLabel: 'jQuery', name: 'framework', inputValue: 'jQUery'}, 
          {boxLabel: 'prototype', name: 'framework', inputValue: 'prototype'}, 
          {boxLabel: 'YIU', name: 'framework', inputValue: 'yui'} 
     ] 
}); 

//creating a form
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox',
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes,
		radios // <-- group of radio buttons
	] 
});

Typically the radios are used together, but if for some strange reason you only need one or instead of using configuration objects in the property "items" of the RadioGroup you want to put instances, you can use the component “Ext.form.Radio”.

Hidden fields

The hidden fields are useful to send information to the server that the user doesn't need to know, such as "id" of the record being edited, or a security token, and so on. ExtJS has the component “Ext.form.Hidden” which allows us to achieve this functionality.

 
//code remove to keep it simple

//creating a form
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},	
	bodyStyle:'padding: 10px', 	 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email',
			name:'txt-email', 
			value:'default@quizzpot.com',
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes, 
		radios,
		{ 
		    	xtype:'hidden',//<--hidden field
		    	name:'h-type', //name of the field sent to the server
		    	value:'developer'//value of the field
		}	 
	] 
});

It is really important to define the property "name" and property "value" to assign the content to the variable that will be sent to the server, we can additionally assign an "id" so we can modify the value easily later on.

Button on the Form

We can assign buttons to the form that when pressed they'll perform the operations defined, for now I'm only going to create buttons with no actions.

 
//creating a form 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'},
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name,
		{ 
			fieldLabel:'Email', 
			name:'txt-email', 
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active',
			id: 'id-active'
		}, 
		checkboxes, 
		radios, 
		{ 
		    	xtype:'hidden',
		    	name:'h-type', 
		    	value:'developer'
		} 
	], 
	buttons:[{text:'Save'},{text:'Cancel'}] //<-- button of the form
});

We can align the position of the buttons to the right, left or center, by default they're aligned to the center, but with the property “buttonAlign” we can define where the buttons are going to be displayed. To align the buttons to the right we would do the following:

 
//creating a form 
this.form= new Ext.FormPanel({ 
	title:'New Developer', 
	renderTo: 'frame', 
	defaults:{xtype:'textfield'}, 
	bodyStyle:'padding: 10px', 			 
	items:[ 
		name, 
		{ 
			fieldLabel:'Email', 
			name:'txt-email',
			value:'default@quizzpot.com', 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', 
			fieldLabel: 'Active',
			name: 'chk-active', 
			id: 'id-active'
		}, 
		checkboxes, 
		radios, 
		{ 
		    	xtype:'hidden',
		    	name:'h-type', 
		    	value:'developer'
		} 
	], 
	buttonAlign: 'right', //<--buttons aligned to the right
	buttons:[{text:'Save'},{text:'Cancel'}] //button of the form
});

Window that contains the form

Just for visual purposes, let's use a window to contain the form, so it is necessary to remove the property “renderTo: 'frame'” and insert the form inside the window that we'll create, we will also move the buttons to the window, the title and body style as follows:

 
//creating a form 
this.form= new Ext.FormPanel({ 
	border:false, // <-- removing the border of the form
	defaults:{xtype:'textfield'},	//component by default of the form
	items:[ 
		name, //assigning the instance we created previously
		{ 
			fieldLabel:'Email', // creating a field
			name:'txt-email', // using a 
			value:'default@quizzpot.com', //configuration 
			id:"id-email" 
		},{ 
			xtype: 'checkbox', //defining the type of component
			fieldLabel: 'Active',//assigning a label
			name: 'chk-active',//and a "name" to retrieve it on the server... 
			id: 'id-active'// ...when the form is sent 
		}, 
		checkboxes, //group of checkboxes 
		radios, // group of radios 
		{ 
		    	xtype:'hidden',//hidden field(hidden) 
		    	name:'h-type', //name of the field sent to the server
		    	value:'developer'//value of the field
		} 
	] 
}); 

//creating the window that will contain the form
var win = new Ext.Window({ 
	title: 'New Developer', 
	width:300, 
	height:300, 
	bodyStyle:'background-color:#fff;padding: 10px', 
	items:this.form, //assigning the form
	buttonAlign: 'right', //buttons aligned to the right
	buttons:[{text:'Save'},{text:'Cancel'}] //buttons of the form
}); 

win.show();

Conclusions

Today we have learned how to create a form very easy and simple, you can download the complete code at the top right of this page. In the next tutorial we'll see how to add a combo box with data loaded locally and remotely to our form and also we'll add some more fields that ExtJS provides us. Don't forget to leave your questions of suggestions at the comment's section and follow us on Twitter (@quizzpot) to be updated.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!