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:

• 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);

});

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