Platinum Partner
java,frameworks

How to Populate Ext JS ComboBox using Spring Controller

 This tutorial will walk through how to populate an ExtJS ComboBox using a Spring Controller. To populate ExtJS ComboBox using Spring Controller, you need create an Ajax request using Ext.data.HttpProxy and as response you can return JSON Objects (or an XML – in this example, I will use JSON). And using a JsonReader, you can read values and popolate ComboBox. It is the same logic used to populate an ExtJS DataGrid.

Frameworks/Libraries I’m using in this tutorial:

If you are using Spring 2.5, you can see my other examples of how to return JSON from Spring using Spring-JSON lib.

I am going to create a combobox to list all states of Brazil. The screenshot of this tutorial is given bellow:

First step is to create  a POJO (Java Object with getters and setters methods only – and constructor):

public class State {

private String code;
private String name;

public State(String code, String name) {
super();
this.code = code;
this.name = name;
}

//get and set methods
}

Following is the Controller. The request is mapped to loadStates() method, which retrieves states from a source (I’m using a method for academic puporses, but you can retrieve data from a database):

@Controller
public class StateController {

private StateService stateService;

@RequestMapping(value="getStates.json", method = RequestMethod.GET)
public @ResponseBody Map<String,? extends Object> loadStates() {

HashMap<String, List<State>> modelMap = new HashMap<String,List<State>>();
modelMap.put("states", stateService.getBrazilianStates());

return modelMap;
}

@Autowired
public void setStateService(StateService stateService) {
this.stateService = stateService;
}
}

The @ResponseBody converts automaticaly the Map object into a JSON object, because of Jackson. Find out about Spring 3 Ajax simplifications here. This is the JSON object the loadStates method returns to the browser:

 

{"states":[{"name":"Acre","code":"AC"},{"name":"Alagoas","code":"AL"},{"name":"Amapá","code":"AP"},{"name":"Amazonas","code":"AM"},
{"name":"Bahia","code":"BA"},{"name":"Ceará","code":"CE"},{"name":"Distrito Federal","code":"DF"},{"name":"Espírito Santo","code":"ES"},
{"name":"Goiás","code":"GO"},{"name":"Maranhão","code":"MA"},{"name":"Mato Grosso","code":"MT"},{"name":"Mato Grosso do Sul","code":"MS"},
{"name":"Minas Gerais","code":"MG"},{"name":"Pará","code":"PA"},{"name":"Paraíba","code":"PB"},{"name":"Paraná","code":"PR"},
{"name":"Pernambuco","code":"PE"},{"name":"Piauí","code":"PI"},{"name":"Rio de Janeiro","code":"RJ"},
{"name":"Rio Grande do Norte","code":"RN"},{"name":"Rio Grande do Sul","code":"RS"},{"name":"Rondônia","code":"RO"},
{"name":"Roraima","code":"RR"},{"name":"Santa Catarina","code":"SC"},{"name":"São Paulo","code":"SP"},{"name":"Sergipe","code":"SE"},
{"name":"Tocantins","code":"TO"}]}

The content above is retrieved from this method in the StateService class:

@Service
public class StateService {

public List<State> getBrazilianStates(){

List<State> states = new ArrayList<State>();

states.add(new State("AC","Acre"));
states.add(new State("AL","Alagoas"));
states.add(new State("AP","Amapá"));
states.add(new State("AM","Amazonas"));
states.add(new State("BA","Bahia"));
states.add(new State("CE","Ceará"));
states.add(new State("DF","Distrito Federal"));
states.add(new State("ES","Espírito Santo"));
states.add(new State("GO","Goiás"));
states.add(new State("MA","Maranhão"));
states.add(new State("MT","Mato Grosso"));
states.add(new State("MS","Mato Grosso do Sul"));
states.add(new State("MG","Minas Gerais"));
states.add(new State("PA","Pará"));
states.add(new State("PB","Paraíba"));
states.add(new State("PR","Paraná"));
states.add(new State("PE","Pernambuco"));
states.add(new State("PI","Piauí"));
states.add(new State("RJ","Rio de Janeiro"));
states.add(new State("RN","Rio Grande do Norte"));
states.add(new State("RS","Rio Grande do Sul"));
states.add(new State("RO","Rondônia"));
states.add(new State("RR","Roraima"));
states.add(new State("SC","Santa Catarina"));
states.add(new State("SP","São Paulo"));
states.add(new State("SE","Sergipe"));
states.add(new State("TO","Tocantins"));

return states;
}
}

Finally, here is the ExtJS code for combobox:

Ext.onReady(function(){

var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'getStates.json'
}),
reader: new Ext.data.JsonReader({
root:'states'
},
[{name: 'code'},
{name: 'name'}
])
});

var combo = new Ext.form.ComboBox({
id: 'statesCombo',
store: store,
displayField: 'name',
valueField: 'code',
hiddenName : 'codeId',
typeAhead: true,
mode: 'local',
fieldLabel: 'States of Brazil',
anchor: '100%',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
selectOnFocus:true
});

var stateForm = new Ext.FormPanel({
frame:true,
url: 'saveState.json',
title: 'Combo Box Example',
bodyStyle:'padding:5px 5px 0',
width: 250,
labelAlign: 'top',
layout: 'form',
items: [combo]
});

store.load();

stateForm.render(document.body);

});
 
You can download the complete project from my GitHub repository: http://github.com/loiane/extjs-combobox

I developed this sample project on Eclipse, and I used TomCat as webserver.

Happy coding!

From http://loianegroner.com/2010/05/how-to-populate-ext-js-combobox-using-spring-controller

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}