Presentation - Ext J.S Grid /Search Example

On the following example you will learn how to create an Ext J.S grid without javascript, using the List Service as datasource.
The following example grid contain the following features

  • Server Side Paging
  • Server Side Filtering
  • Grouping
  • Print Grid
  • Export XLS
  • Personalization with preferences saved in the Database

To access the example click on the demo application(guest/guest) or here to see the preview the result.


Analysis Document

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

View Name CountryList
Main Object
Sub Project Services
Description List/Search functionality
filterLocal false
pagingRequired true records per page 25
grouping false group field  
sortAttribute name sort DESC  
componentstate true
dataURL ../json/listCountries
excelFriendly true
printFriendly true
Data Name Type Hidden Filter Descr
countryId numeric true numeric Primary Key
name String False String Name of the country
continent String False String Continent
countryCode String False String Country Code
intPhoneCode String False String Int Access Code
population numeric False numeric Country Population

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 View

Based on the above table we need a to create a grid with 5 columns. Before doing anything we need to create a file on which we will put our view, this file is countryListBeans.xml (source) and add it on the application context by declaring it on (source)

Declare the fields

Example Field : countryId
<bean id="countryIdCountry" class="org.jprovocateur.presentation.formtemplate.components.fields.InputText">
      <property name="fieldName"><value>countryId</value></property>
      <property name="filter"><ref bean="genericNumericFilter" /></property>
      <property name="xtype"><value>numberfield</value></property>
      <property name="sortable"><value>true</value></property>
      <property name="width"><value>50</value></property>
      <property name="hidden"><value>true</value></property>
      <property name="translationKey">***<value>countryId</value></property>

The following table provides an overview of the above xml fragment

Property Value Mandatory Explanation
id countryIdCountry true The object id.
fieldName countryId true The property as it is declared in Hibernate object.
filter genericNumericFilter false It is a preconfigured filter for numeric values. Other preconfigured filter is genericTextFilter for text fileds.
xtype numberfield false Defines that the values are numbers. By default treats data as text
sortable true true Is the column sortable?
width 50 true Defines the size of the column
hidden true false Is the column hidden? Default false
translationKey countryId true Define the label

All the other fields are declared on the same way.

Declare the Grid


The following table provides an overview of the above xml fragment


Property Value Mandatory Explanation
id countryListForm true The object id.
formName countryListForm true The same name as the id.
filterLocal false true Define if the filters will be applied locally or the server should be contacted .
width 980 true width in pixels
height 751 false Auto size
excelFriendly true false Export data in Excel
printFriendly true false Print View of the Grid
componentstate true false It allows the personalization of the grid. User selections are saved on the DB and restore auto
template ../grid/grid.ftl true The template that will be used to generate the grid. Users can create their own templates if needed
totalProperty bcObject.listSize true The place on the JSON that contains the numer of the records
dataURL ../json/listCountries true The url of the service.
translationKey Countries true The header grid.
preview false true ??????????? More advanced example
pagingRequired true true The paging takes place on the server, all created list services support paging
recPerPages 30 false The records per page
root bcObject.executionListData true The path in JSON to extract the records. Use it as it is
idProperty countryId true The property that will be used as pk, it is the pk of the table.
sortAttribute name true The property on which the sorting will take place
sort DESC true DESC/ASC
grouping true true Is grouping of data required?
groupField continent false The field on which the grouping will be applied

<ref bean="countryIdCountry" />
<ref bean="nameCountry" />
<ref bean="continentCountry" />
<ref bean="countryCodeCountry" />
<ref bean="intPhoneCodeCountry" />
<ref bean="populationCountry" />

true The field that will be included on the view

Define the container on which the Grid exist

On this step, a template will be defined on which the grid will be placed. On the template we can define one or more components. The provided template will render the included components one after the other.


Assign the declared template on a servlet

The above template has to be assigned on a servlet. Edit /sampleweb/src/main/webapp/WEB-INF/servletConfiguration/application/confs/exampleCountry.xml and add

<bean id="dispatchCountryListViewController" class="org.jprovocateur.mvc.basisweb.controller.SimpleViewController" >
       <property name="formName" value="countryListTemplate"/>

Now assign the servlet to a URL. Edit /sampleweb/src/main/webapp/WEB-INF/application-servlet-url.xml and add

<prop key="/view/listCountries">dispatchCountryListViewController</prop>

You are done!!!! Your Grid is ready!!!You can access it on the demo server (guest/guest)

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