Print Shortlink

Ext.data.DirectStore with DirectJNgine

In the previous post, we saw an example of Ext.direct using DirectJNgine. Let’s discuss using Ext.data.DirectStore to populate a combobox in this post.

We’ll display a list of countries in the combobox. The server side code that returns a list of countries is shown below.

//CountriesStore.java
package com.durasoft;

import java.util.ArrayList;
import com.softwarementors.extjs.djn.config.annotations.DirectAction;
import com.softwarementors.extjs.djn.config.annotations.DirectMethod;

@DirectAction(action="CountriesStore")
public class CountriesStore {
	@DirectMethod
	public ArrayList<Country> loadCountries() {
		ArrayList<Country> countries = new ArrayList<Country>();
		countries.add(new Country("India","New Delhi"));
		countries.add(new Country("US","Washington, D.C"));
		countries.add(new Country("UK","London"));
		return countries;
	}
}
//Country.java
package com.durasoft;

public class Country {
	private String name;
	private String capital;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCapital() {
		return capital;
	}
	public void setCapital(String capital) {
		this.capital = capital;
	}
	public Country(String name, String capital) {
		this.name = name;
		this.capital = capital;
	}
	public Country() {
	}
}

In Ext JS4 you’ll use Ext.data.DirectStore class to display the country names in a combobox. The Code is shown below.

Ext.define("Country",{
	extend : "Ext.data.Model",
	fields : ["name","capital"]
});
Ext.onReady(function(){
	Ext.Direct.addProvider(
			DuraSoft.direct.REMOTING_API
	);
	var countryStore = Ext.create("Ext.data.DirectStore",{
			model : "Country",
			autoLoad : true,
			proxy : {
				    type : "direct",
				    directFn : CountriesStore.loadCountries
 				}
			});
	Ext.create("Ext.form.Panel",{
			renderTo : Ext.getBody(),
			title : "Ext.direct store",
			items : [
			        	{
			        		xtype:"combo",
			        		fieldLabel:"Countries",
			        		store : countryStore,
			        		displayField : "name"
			        	}
			        ]
	});
 }
);

We’ve created a DirectStore instance that uses a “direct” proxy. The directFn property specifies the server-side method loadCountries in CountriesStore class. This proxy uses JsonReader indirectly to parse the data returned from the server. DirectJNgine serializes the data to JSON format automatically.

The complete project created in Eclipse is available at http://durasoftindia.com/downloads/ExtDirect.rar

Leave a Reply