Presentation - Ext J.S Form /Create Example

On the following example you will learn how to create an Ext J.S form as popup without javascript, using the Create Service as datasource.
The following example form contains the following features

  • Creation of button on the grid to open the popup form
  • Definition of a Text input field
  • Definition of Static List field
  • Validation Client Side

To access the example click on

the demo application(guest/guest)

and click Register Country button.

Analysis Document

For this step the developer should receive a table containing the following information from the analyst.

Property Name Property Value Description
formName registerCountryForm the name of the object
formType CREATE possible values CREATE/ UPDATE/ DELETE/ VIEW
render false The form will not be rendered when the user goes to page, it will be rendered only when a user performs an action e.g. press a button
template ../form/form.ftl This is the default template for input forms, can render master details forms
dataURL ../json/registerCountry The url that the service is available
Description Country Create Form. This form will be used as base for the UPDATE/VIEW forms
Row Name fieldName translationKey anchor Other info
0 nameCountryInput name Country Name 60% The country Name
1 countryCodeCountryInput countryCode Country Code 40% The country code
2 continentCountryInput continent Continent 70% Continent. List with possible values {EUROPE/ASIA/SOUTH AMERICA/NORTH AMERICA/AUSTRALIA}
3 intPhoneCodeCountryInput intPhoneCode Int. Phone Code 60%  
populationCountryInput population Population 60% numeric values only.

Based on the above description a grid that will use serverside filtering and paging with Excel Export / Print / State Management capabilities is required

Implementation of the Input View

In order to create an input form, you need to configure the different fields of the form, assign fields in different rows, assign rows to an input form.

Based on the above table, a form with 3 lines is required. Before doing anything we need to create a file on which we will put our view, this file is countryCreateBeans.xml (source) and add it on the application context by declaring it on applicationFrontendConfigurationFiles.properties (source)

Declare the fields

Field : name

 
	name 
	Country Name 
	60% 

The above xml fragment defines a field of input text, with mapped property name, label=Country Name and anchor 60%

Field : countryCode

 
	countryCode 
	Country Code 
	40% 


The above xml fragment defines a field of input text, with mapped property countryCode, label=Country Code and anchor 40%

Field : continent

 
	continent 
	Continent 
	70% 


The above xml fragment defines a field of input text, with mapped property continent, label=Continent and anchor 70%

Field : intPhoneCode

 
	intPhoneCode 
	Int. Phone Code 
	60% 


The above xml fragment defines a field of input text, with mapped property intPhoneCode, label=Int. Phone Code and anchor 60%

Field : population

 
	population 
	numberfield 
	population 
	60% 


The above xml fragment defines a field of input text, with mapped property intPhoneCode, label=Int. Phone Code and anchor 60%. On this field we have defined that is xtype numberfield as only numbers are acceptable

Declare the rows

The analysis document defines on which row each field should appear and their position. e.g.the line 3 contains 2 fields


	
		
			
		
	
		

Define the submit button

This is the button that will submit the values on the form

 
	actionRegisterCountryForm 
	../form/buttons/submitFormButton.ftl 
	Register Country 


You define the id, name and imageAlt that you wish. The important property is the toggleHandlerFilename that defines which template it should be used for the button.

Define the Form

To create the form we define some basic properties about the form and we use the defined rows and buttons.


      registerCountryForm
      CREATE
      false
      600
	  450
      ../form/form.ftl
      ../json/registerCountry
      countryId	
      Register Country
      
			
				
  				
  				
  				
			
      
      
             
             
	   		
     	


Define the container on which the Form exist

On this step, we will add the form on a template. We use the the template that we have included the List Countries Grid. The user through the List countries list will press a button and the popup form will open.


	/container/simpleContainer
	
		
			
			
		
	
  

Define the Popup Button

This is a button that will be added on the grid and will open the Input form.

 
	actionPopUpRegisterCountryForm 
	../form/buttons/popUpFormButton.ftl 
	url 
	Register Country 

 

The most important properties are the toggleHandlerFilename and the url. The toggleHandlerFilename defines the template that will be used for the button. The url should be equal with the form name that you want to open.

Add the Popup Button to the Grid

The popup button should be declared on the Grid. To do this add the following to the grid

       
 
	countryListForm 
	. 
	. 
	. 
	. 
	 
		 
	  		 
 		 
	 
                           				   
                  

You are done!!!! Your Form is ready!!!You can access it on the demo server (guest/guest) and press Register Country Button

 
Design downloaded from free website templates.
 
Web Templates created with FlashMint. .