Tutorial: Linked/Cascading ExtJS Combo Boxes using Spring MVC 3 and Hibernate 3.5
Join the DZone community and get the full member experience.
Join For Free
this post will walk you through how to implement extjs linked/cascading/nested combo boxes using spring mvc 3 and hibernate 3.5. i am going to use the classic linked combo boxes: state and cities. in this example, i am going to use states and cities from brazil!
what is our main goal? when we select a state from the first combo box, the application will load the second combo box with the cities that belong to the selected state.
there are two ways to implement it.
the first one is to load all the information you need for both combo boxes, and when user selects a state, the application will filter the cities combo box according to the selected state.
the second one is to load information only to populate the state combo box. when user selects a state, the application will retrieve all the cities that belong to the selected state from database.
which one is best? it depends on the amount of data you have to retrieve from your database. for example: you have a combo box that lists all the countries in the world. and the second combo box represents all the cities in the world. in this case, scenario number 2 is the best option, because you will have to retrieve a large amount of data from the database.
ok. let’s get into the code. i’ll show how to implement both scenarios.
first, let me explain a little bit of how the project is organized:
let’s take a look at the java code.
basedao:
contains the hibernate template used for citydao and statedao.
package com.loiane.dao;
import org.hibernate.sessionfactory;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.orm.hibernate3.hibernatetemplate;
import org.springframework.stereotype.repository;
@repository
public abstract class basedao {
private hibernatetemplate hibernatetemplate;
public hibernatetemplate gethibernatetemplate() {
return hibernatetemplate;
}
@autowired
public void setsessionfactory(sessionfactory sessionfactory) {
hibernatetemplate = new hibernatetemplate(sessionfactory);
}
}
citydao:
contains two methods: one to retrieve all cities from database (used in scenario #1), and one method to retrieve all the cities that belong to a state (used in scenario #2).
package com.loiane.dao;
import java.util.list;
import org.hibernate.criterion.detachedcriteria;
import org.hibernate.criterion.restrictions;
import org.springframework.stereotype.repository;
import com.loiane.model.city;
@repository
public class citydao extends basedao{
public list<city> getcitylistbystate(int stateid) {
detachedcriteria criteria = detachedcriteria.forclass(city.class);
criteria.add(restrictions.eq("stateid", stateid));
return this.gethibernatetemplate().findbycriteria(criteria);
}
public list<city> getcitylist() {
detachedcriteria criteria = detachedcriteria.forclass(city.class);
return this.gethibernatetemplate().findbycriteria(criteria);
}
}
statedao:
contains only one method to retrieve all the states from database.
package com.loiane.dao;
import java.util.list;
import org.hibernate.criterion.detachedcriteria;
import org.springframework.stereotype.repository;
import com.loiane.model.state;
@repository
public class statedao extends basedao{
public list<state> getstatelist() {
detachedcriteria criteria = detachedcriteria.forclass(state.class);
return this.gethibernatetemplate().findbycriteria(criteria);
}
}
city:
represents the city pojo, represents the city table.
package com.loiane.model;
import javax.persistence.column;
import javax.persistence.entity;
import javax.persistence.generatedvalue;
import javax.persistence.id;
import javax.persistence.table;
import org.codehaus.jackson.annotate.jsonautodetect;
@jsonautodetect
@entity
@table(name="city")
public class city {
private int id;
private int stateid;
private string name;
//getters and setters
}
state:
represents the state pojo, represents the state table.
cityservice:
contains two methods: one to retrieve all cities from database (used in scenario #1), and one method to retrieve all the cities that belong to a state (used in scenario #2). only makes a call to citydao class.
package com.loiane.service;
import java.util.list;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.service;
import com.loiane.dao.citydao;
import com.loiane.model.city;
@service
public class cityservice {
private citydao citydao;
public list<city> getcitylistbystate(int stateid) {
return citydao.getcitylistbystate(stateid);
}
public list<city> getcitylist() {
return citydao.getcitylist();
}
@autowired
public void setcitydao(citydao citydao) {
this.citydao = citydao;
}
}
stateservice:
contains only one method to retrieve all the states from database. makes a call to statedao.
package com.loiane.service;
import java.util.list;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.service;
import com.loiane.dao.statedao;
import com.loiane.model.state;
@service
public class stateservice {
private statedao statedao;
public list<state> getstatelist() {
return statedao.getstatelist();
}
@autowired
public void setstatedao(statedao statedao) {
this.statedao = statedao;
}
}
citycontroller:
contains two methods: one to retrieve all cities from database (used in scenario #1), and one method to retrieve all the cities that belong to a state (used in scenario #2). only makes a call to cityservice class. both methods return a json object that looks like this:
class:
package com.loiane.web;
import java.util.hashmap;
import java.util.map;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.requestparam;
import org.springframework.web.bind.annotation.responsebody;
import com.loiane.service.cityservice;
@controller
@requestmapping(value="/city")
public class citycontroller {
private cityservice cityservice;
@requestmapping(value="/getcitiesbystate.action")
public @responsebody map<string,? extends object> getcitiesbystate(@requestparam int stateid) throws exception {
map<string,object> modelmap = new hashmap<string,object>(3);
try{
modelmap.put("data", cityservice.getcitylistbystate(stateid));
return modelmap;
} catch (exception e) {
e.printstacktrace();
modelmap.put("success", false);
return modelmap;
}
}
@requestmapping(value="/getallcities.action")
public @responsebody map<string,? extends object> getallcities() throws exception {
map<string,object> modelmap = new hashmap<string,object>(3);
try{
modelmap.put("data", cityservice.getcitylist());
return modelmap;
} catch (exception e) {
e.printstacktrace();
modelmap.put("success", false);
return modelmap;
}
}
@autowired
public void setcityservice(cityservice cityservice) {
this.cityservice = cityservice;
}
}
statecontroller:
contains only one method to retrieve all the states from database. makes a call to stateservice. the method returns a json object that looks like this:
{"data":[
{"countryid":1,"name":"acre","id":1,"code":"ac"},
{"countryid":1,"name":"alagoas","id":2,"code":"al"},
{"countryid":1,"name":"amapá","id":3,"code":"ap"},
{"countryid":1,"name":"amazonas","id":4,"code":"am"},
{"countryid":1,"name":"bahia","id":5,"code":"ba"},
{"countryid":1,"name":"ceará","id":6,"code":"ce"},
{"countryid":1,"name":"distrito federal","id":7,"code":"df"},
{"countryid":1,"name":"espírito santo","id":8,"code":"es"},
{"countryid":1,"name":"goiás","id":9,"code":"go"},
{"countryid":1,"name":"maranhão","id":10,"code":"ma"},
{"countryid":1,"name":"mato grosso","id":11,"code":"mt"},
{"countryid":1,"name":"mato grosso do sul","id":12,"code":"ms"},
{"countryid":1,"name":"minas gerais","id":13,"code":"mg"},
{"countryid":1,"name":"pará","id":14,"code":"pa"},
]}
class:
package com.loiane.web;
import java.util.hashmap;
import java.util.map;
import org.springframework.beans.factory.annotation.autowired;
import org.springframework.stereotype.controller;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.responsebody;
import com.loiane.service.stateservice;
@controller
@requestmapping(value="/state")
public class statecontroller {
private stateservice stateservice;
@requestmapping(value="/view.action")
public @responsebody map<string,? extends object> view() throws exception {
map<string,object> modelmap = new hashmap<string,object>(3);
try{
modelmap.put("data", stateservice.getstatelist());
return modelmap;
} catch (exception e) {
e.printstacktrace();
modelmap.put("success", false);
return modelmap;
}
}
@autowired
public void setstateservice(stateservice stateservice) {
this.stateservice = stateservice;
}
}
inside the webcontent folder we have:
- ext-3.2.1 – contains all extjs files
- js – contains all javascript files i implemented for this example. liked-comboboxes-local.js contains the combo boxes for scenario #1; liked-comboboxes-remote.js contains the combo boxes for scenario #2; linked-comboboxes.js contains a tab panel that contains both scenarios.
now let’s take a look at the extjs code.
scenario number 1:
retrieve all the data from database to populate both combo boxes. will user filter on cities combo box.
liked-comboboxes-local.js
var localform = new ext.formpanel({
width: 400
,height: 300
,style:'margin:16px'
,bodystyle:'padding:10px'
,title:'linked combos - local filtering'
,defaults: {xtype:'combo'}
,items:[{
fieldlabel:'select state'
,displayfield:'name'
,valuefield:'id'
,store: new ext.data.jsonstore({
url: 'state/view.action',
remotesort: false,
autoload:true,
idproperty: 'id',
root: 'data',
totalproperty: 'total',
fields: ['id','name']
})
,triggeraction:'all'
,mode:'local'
,listeners:{select:{fn:function(combo, value) {
var combocity = ext.getcmp('combo-city-local');
combocity.clearvalue();
combocity.store.filter('stateid', combo.getvalue());
}}
}
},{
fieldlabel:'select city'
,displayfield:'name'
,valuefield:'id'
,id:'combo-city-local'
,store: new ext.data.jsonstore({
url: 'city/getallcities.action',
remotesort: false,
autoload:true,
idproperty: 'id',
root: 'data',
totalproperty: 'total',
fields: ['id','stateid','name']
})
,triggeraction:'all'
,mode:'local'
,lastquery:''
}]
});
the state combo box is declared on lines 9 to 28.
the city combo box is declared on lines 31 to 46.
note that both stores are loaded when we load the page, as we can see in lines 15 and 38 (autoload:true).
the state combo box has select event listener that, when executed, filters the cities combo (the child combo) based on the currently selected state. you can see it on lines 23 to 28.
cities combo has lastquery:”" . this is to fool internal combo filtering routines on the first page load. the cities combo just thinks that it has already been expanded once.
scenario number 2:
retrieve all the state data from database to populate state combo. when user selects a state, application will retrieve from database only selected information.
liked-comboboxes-remote.js:
var databaseform = new ext.formpanel({
width: 400
,height: 200
,style:'margin:16px'
,bodystyle:'padding:10px'
,title:'linked combos - database'
,defaults: {xtype:'combo'}
,items:[{
fieldlabel:'select state'
,displayfield:'name'
,valuefield:'id'
,store: new ext.data.jsonstore({
url: 'state/view.action',
remotesort: false,
autoload:true,
idproperty: 'id',
root: 'data',
totalproperty: 'total',
fields: ['id','name']
})
,triggeraction:'all'
,mode:'local'
,listeners: {
select: {
fn:function(combo, value) {
var combocity = ext.getcmp('combo-city');
//set and disable cities
combocity.setdisabled(true);
combocity.setvalue('');
combocity.store.removeall();
//reload city store and enable city combobox
combocity.store.reload({
params: { stateid: combo.getvalue() }
});
combocity.setdisabled(false);
}
}
}
},{
fieldlabel:'select city'
,displayfield:'name'
,valuefield:'id'
,disabled:true
,id:'combo-city'
,store: new ext.data.jsonstore({
url: 'city/getcitiesbystate.action',
remotesort: false,
idproperty: 'id',
root: 'data',
totalproperty: 'total',
fields: ['id','stateid','name']
})
,triggeraction:'all'
,mode:'local'
,lastquery:''
}]
});
the state combo box is declared on lines 9 to 38.
the city combo box is declared on lines 40 to 55.
note that only state combo store is loaded when we load the page, as we can see at the line 15 (autoload:true).
the state combo box has the select event listener that, when executed, reloads the data for cities store (passes stateid as parameter) based on the currently selected state. you can see it on lines 24 to 38.
cities combo has lastquery:”" . this is to fool internal combo filtering routines on the first page load. the cities combo just thinks that it has already been expanded once.
you can download the complete project from my github repository:
i used eclipse ide + tomcat 7 to develop this sample project.
references: http://www.sencha.com/learn/tutorial:linked_combos_tutorial_for_ext_2
Opinions expressed by DZone contributors are their own.
Comments