Loiane Groner, Brazilian, works as a Java/ Sencha evangelist. She has 7+ years of experience in web development. She is the ESJUG (Espirito Santo Java Users Group) and CampinasJUG (Campinas Java Users Group) leader and coordinator. Loiane is passionate about technology and programming. Also author of ExtJS 4 First Look book. Loiane is a DZone MVB and is not an employee of DZone and has posted 42 posts at DZone. You can read more from them at their website. View Full User Profile

How to Populate Ext JS ComboBox using Spring Controller

06.02.2010
| 19629 views |
  • submit to reddit

 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

Published at DZone with permission of Loiane Groner, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Alfonso Franco replied on Thu, 2010/06/17 - 9:35am

Hello dear Loiane, Iam a student business programming at college. I have read this spring controller project , but I got a link similar with combo box that will be download at http://www.theserverside.com/news/1364562/Java-GUI-Development-Reintroducing-MVC. Please would you like to tell me which are the best codes there about combo box. Right you will contact to me to my e-mail developfranco@yahoo.com .Thanks

Ram chintalapati replied on Wed, 2011/07/06 - 11:50am

Hi Loiane,

Nice article. I have been trying to get spring and extjs to work together. But was not able to get it to work. So,I found this. But if you could have explained better on how the pojo or the response is converted to the json object or shown how to annotate to get the json conversion happens that would be great. After goign through the github only i was able to understand. 

 

Thanks for nice tutorial

 

regards

Ram

Michael Eric replied on Wed, 2012/09/26 - 3:46pm

Hello,

Thanks for the excellent post, but i am not clear about where the method loadStates() is invoked, and how could the javascript acquire the json generated by the controller.

Your clarification is utterly appreciated !

debian 

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.