Learning Ext JS 3

Ext JS basic forms and fields Más videos

Descripción del tema

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:
Empty Form Image

Empty Form

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.
Textfields image

Textfields

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 
	] 
});
Imagen de checkboxes

Checkboxes with ExtJS

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
	] 
});
Radiobuttons Image

Group of Radiobuttons

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
});
Buttons Image

Button in a 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
});
Image of the buttons aligned

Buttons aligned to the right

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();
Window with a form image

Window with a form

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.

35Comentarios

  • 7392686f26586370c2e30a3dd6242598?s=50&d=identicon Chan 15/10/2009

    Great tutorials.....please continue your good work!!!

    • 357a20e8c56e69d6f9734d23ef9517e8?s=50&d=identicon Okee 06/11/2009

      that is cool

      • E5b0b1f5471cb185a06fcb35fbaaf3d8?s=50&d=identicon N00bUser 10/12/2009

        Great job!

        • 91a529a00b5e5d78ca5686376820f553?s=50&d=identicon tot2ivn 26/02/2010

          Thanks a lot for the tut. Saved me quite amount of time w ExtJS form. :)

          • B26adf37f6edc053a40991d73d8e01d7?s=50&d=identicon Robert 24/03/2010

            How would you get the field labels to appear closer to it corresponding field. .. rather than

            • 7e755cbf90d84194663f056b6454ccbb?s=50&d=identicon Alex 09/04/2010

              You can use the 'labelStyle' config option to set the label width. Example: { xtype:'textfield', labelStyle:'width:200px;' } If you want all your fields to be the same width, you can use the 'defaults' config option of the form to apply the same configuration on all child items. Example: new Ext.FormPanel({ defaults:{ labelStyle:'width:200px;' }, items:[ { xtype:'textfield' } ] });

              • A5a57202319ec9b5a6e385f9d0b34da0?s=50&d=identicon karthick 25/05/2010

                Very helpful...thanks

                • B935298a258d6f050d0388603962dae3?s=50&d=identicon Doni 07/06/2010

                  what about checkbox in comboBox. How to do that

                  • 20de2139c1e46608f9b7299e4c5883f1?s=50&d=identicon agnes 09/08/2010

                    Hello, how to change the alignment of the text inside the button, for example i would like to have OK text on the right of the button,can anybody help me?

                    • 0d2f7ecbe93d63fe52226615447e24d0?s=50&d=identicon Ivan 10/08/2010

                      I would like to change the alignment text too. I could find only it: var myButton = Ext.get('myButton'); myButton.child('.x-btn-mc').setStyle('text-align', 'right');

                      • 9d19be21c050c3e415ceef59b97ea11a?s=50&d=identicon Arun 15/08/2010

                        How can I move the label for a textfield to always appear above the textfield instead of on the left?

                        • Cd5930606d307c737813c0a635496d14?s=50&d=identicon Joydeep 23/08/2010

                          How all the form fields can be accessed ?

                          • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 23/08/2010

                            You can get the values of all fields like this: <pre name="code" class="javascript"> this.form.getForm().getValues(); </pre>

                            • 9ba43b384064249a2ca0654a838ce260?s=50&d=identicon You Cab 06/10/2010

                              how to get value from checkbox using post method? i'm using php. thx

                              • Bb356e7dcddb08a86d4d9898e3ba3216?s=50&d=identicon naveen 16/11/2010

                                Hi, I have a html select converted to extJS combobox using transform attribute. How can I access the transformed elements to set some values programatically? Thanks

                                • Fb4e692476bd3d54a07f1143ba68ff90?s=50&d=identicon vijay 21/01/2011

                                  very nice....each n every even minor things also covered.....go ahead please....thnks

                                  • Fde306145391eef24a82024702024308?s=50&d=identicon Gautam 25/01/2011

                                    Excellent ExtJs tutorial. Please keep writing.

                                    • 2ae7515a94906b488f4397e453fe9126?s=50&d=identicon Imran 02/02/2011

                                      What about to use textarea?

                                      • 31749678459bb9da587209f100d3e58a?s=50&d=identicon neki chan 09/02/2011

                                        simply useful. thanks alot ! :D

                                        • 2658558bc5b7ba08ffd3a33c47c48483?s=50&d=identicon enmn 01/03/2011

                                          create, but i how to get all field names???

                                          • 7344c04fee0e5535e239b2a83623041a?s=50&d=identicon Crysfel 01/03/2011

                                            In order to get all fields and their values you need to do this: form.getForm().getValues();

                                            • 0cb7318789cee45b4fe9bd6260a23f84?s=50&d=identicon kiran 22/03/2011

                                              I need to set fieldDescription dynamically using the js .. can anyone help on this

                                              • C2131194131735a4942b545fa30135cf?s=50&d=identicon Tamil Selvam .P 10/06/2011

                                                Hi Team, I am new to ExtJs, I able to design login page with extjs, and using with spring and hibernate, i am not able to get return value, Like. If user name and password are valid page should be redirect, If is not valid, error should pass in same page. Please help me. Regards, Tamil Selvam .P

                                                • E0146877fd821034d443f0e112a3b5d4?s=50&d=identicon Anoop 16/06/2011

                                                  Hi. I would like to have my form fields( text box, combo and an image in same row and two such rows) and how can i do this using exts JS. i tried different layouts. but not working. could you please help? Thanking you in advance, Anoop

                                                  • 37da660511f95134aac46d221ea80e99?s=50&d=identicon Wilder 24/06/2011

                                                    Donde esta el enlace acceder a los tutoriales?

                                                    • 38b5f51644eb3579d2b7c25db2528b78?s=50&d=identicon RAFF 27/06/2011

                                                      Excellent tutorial!!! Good job!

                                                      • 4c9e419d705761af13fb19add46961f9?s=50&d=identicon Raj Kapoor 20/07/2011

                                                        I have a requirement to display input text fields along with radio buttons, something like this scenario To display a radio group with 2 options of 'Make' and 'Model' of a car, with input text next to each radio option to input either make or model. Any ideas for a solution?

                                                        • 6ea5024d927d0d271be0e339a6a0ecd0?s=50&d=identicon Rashmi 21/07/2011

                                                          Superb tutorials. Thanks a lot!!!!!!!!

                                                          • E6fd0778757de607e6cb9c5e4d31b4a3?s=50&d=identicon Tom 27/09/2011

                                                            how can we move textbox beneath the lable in extjs.

                                                            • 203a5c7a850383ec6d8e621d30719f14?s=50&d=identicon Alana 30/11/2011

                                                              The align button don't work. The buttons is always align in the left. Any ideas for a solution?

                                                              • A280e4b61a3100954c162d75c867b4c3?s=50&d=identicon Arun 27/03/2012

                                                                thank you very much.. its useful

                                                                • 1a3254621439a52860da48f82c9fd883?s=50&d=identicon sergiu 01/06/2012

                                                                  Great job ! thanks

                                                                  • Bc79133bcc2e8196accf723864db711c?s=50&d=identicon nancy 02/07/2012

                                                                    Does anyone know how to reduce the gap between the fieldLabel and the component? (let's say a combobox) Thanks!

                                                                    • 60da0108cd213e1c890aaa8f0a56cac2?s=50&d=identicon jenifer 13/07/2012

                                                                      Quite informative... Keep blogging such useful materials.

                                                                      • 774c59ceeda96559193b6c3995de2d58?s=50&d=identicon mani 11/07/2013

                                                                        Hi, How to assign one of the textbox values to other textbox's field names?

                                                                        Instructor del curso

                                                                        Crysfel Villa

                                                                        Autor: Crysfel Villa

                                                                        Software engineer with more than 7 years of experience in web development.

                                                                        Descarga Código Fuente Ver Demostración