Ext和服务器端的交互

Ext客户端方面的文章Google一下，可以得到很多，但是关于Ext如何与服务器端进行交互，这方面的文章就比较少。下面我就来简单介绍一下Ext和服务器端的交互，基础的东西我就不多说啦，不清楚的自己去Google。

Ext和服务器交互的方式有好几种，下文采用的方式是json，会用到json-lib，没有这个包的先去网上下载，先贴几个简单的函数，用户把服务器的相应以json的方式发送到客户端（这部分代码，我也是从网上看来的，拿来主义...）

	public void outJsonString(String str) {
		response.setContentType("text/javascript;charset=UTF-8");
		outString(str);
	}

	public void outJson(Object obj) {
		outJsonString(JSONObject.fromObject(obj).toString());
	}

	public void outJsonArray(Object array) {
		outJsonArray(JSONArray.fromObject(array).toString());
	}

	public void outString(String str) {
		try {
			PrintWriter out = response.getWriter();
			out.write(str);
		} catch (IOException e) {
		}
	}

 上述代码非常简单，就不需要解释了吧。

 下面再贴段代码（再次拿来...），这段代码定义了一个对象，这个对象包含了Ext需要的必要的信息，outJson这个对象，Ext客户端就能够读懂服务返回的信息。

public class ListRange<T> {
	boolean success;
	String message;
	long totalSize;
	List<T> list;

	public ListRange() {
		this.totalSize = 0;
		this.list = new ArrayList<T>();
	}

	public long getTotalSize() {
		return totalSize;
	}

	public void setTotalSize(long totalSize) {
		this.totalSize = totalSize;
	}

	public List<T> getList() {
		return list;
	}

	public void setList(List<T> list) {
		this.list = list;
	}

	public boolean isSuccess() {
		return success;
	}

	public void setSuccess(boolean success) {
		this.success = success;
	}

	public String getMessage() {
		return message;
	}

	public void setMessage(String message) {
		this.message = message;
	}
}

 

 下面简单演示下如何利用上面的介绍的东西来实现客户端和服务端的交互，

 先来服务端的：

public class user{	private int id;
	private String name;
	private String password;
	//以下是name和password的settter和gettter
}

在你的Action对象中增加一个方法用户向客户端输出用户列表
public void doGetUsers(){
	ListRange<user> result = new ListRange();
	try{
		List<user> users = getUsers();//Users既可以从数据库中获取，也可以构造一个简单的List，填充简单的数据，然后返回这个List
		result.setList(users);
		result.setTotalSize(users.size());//如果需要分页，这个totalSize应该是所有users的个数，而不是当前页users的个数
		result.setSuccess(true);
	}catch(Exception e){
		result.setSuccess(false);
		result.setMessage(e.getMessage());
	}

	outJson();
}

 

  客户端的：

  构造一个简单的grid，在这个grid中显示用户列表，

//用户数据源
var userDS = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({
        url: 'doGetUsers.action'
    }),

    reader: new Ext.data.JsonReader({
        root: 'list',//对应ListRange的List
        totalProperty: 'totalSize',//对应ListRange的totalSize
        id: 'id',//对应用户的id
        fields: ['id', 'name', 'password']
    }),
    remoteSort: false
});

 

var userCM = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),
	{id: 'id', header: "id", dataIndex: 'id', type: 'int', width: 20, hidden: true, sortable: true},
	{header: "用户名", dataIndex: 'name', width: 30, sortable: false},
	{header: "密码", dataIndex: 'password', width: 50, sortable: false}
]);

 

.....
var grid = new Ext.grid.GridPanel({
        ds: userDS,
        cm: userCM,
        stripeRows: true,
        height:350,
        width:600
});
....

 

到此，这个Grid就可以使用了，它能够从服务器获取用户列表，然后显示在Grid中。

 

下面再说下如何以Ajax方式异步从服务器获取用户列表，这个也很简单：

Ext.Ajax.request({
	url: 'doGetUsers.action',
	method: 'post',
	success: function(response, option){//还记得ListRange的success属性吗,如果success为true，就会执行下列代码，否则就执行failure
		var json = response.responseText;
		var o = eval('(' + json + ')');
		alert(o.totalSize);
		
	},
	failure: function(response, option){
		var json = response.responseText;
		var o = eval('(' + json + ')');
		alert(o.message);
	}
	
});

 

ps：不太适应这个编辑器，格式有点乱，各位将就着看..

 

以后有时间再为大家讲讲如何在Grid中实现CRUD操作