Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Populate Ext JS ComboBox using Spring Controller

DZone's Guide to

How to Populate Ext JS ComboBox using Spring Controller

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

 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:

  • ExtJS (you can download the lastest version here);
  • Spring MVC 3
  • Jackson (used to return JSON from Spring Controller)

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

Are you using Bitbucket to accomplish your company's mission? Share your company’s mission with #Forthecode for a chance to be featured on our homepage, our social media channels, or win a free t-shirt!

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}