exjs dwr spring 强强联姻

ExtJs 在Web UI已经获得很大的殊荣，但单凭借它 Client UI 还无法霸占BS 那么丰富的应用。。他还要选择 一个Web层与后台一起来交互完成一个完美的系统。

Extjs的天生丽质的, 完美了融合JQuery,Prototype,YUI， 和她结合当然也需要出类拔萃，生出名门。 如果采用Java为开发主语言，那么 ExtJS + DWR + SPRING 算是门当户对。

可惜Extjs 的DataStore 的 prxy 并没有DWR一席，因为DWR返回的是Java对象与JSON非常像, 然而DWR 的在于它与Web远程Java方法的直接会话，因此有着非常灵活的一面。所以，有时候使用DWR对于J2EE来说，要更好于JSON，他做了JSON做不到事.

extjs官方论坛里已经有人编写了这样的扩展，后经人丰富，现在基本能满足要求了。
DWR扩展代码如下，创建 Ext.data.DWRProxy类。同样也继承Ext.data.DataProxy ，拿来show着解读一下。

dwr.js

Ext.data.DWRProxy = function(dwrCall, pagingAndSort){
Ext.data.DWRProxy.superclass.constructor.call(this);
this.dwrCall = dwrCall;
//this.args = args;
this.pagingAndSort = (pagingAndSort!=undefined ? pagingAndSort : true);
};

Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function(params, reader, callback, scope, arg) {
if(this.fireEvent("beforeload", this, params) !== false) {
var sort;
if(params.sort && params.dir) sort = params.sort + ' ' + params.dir;
else sort = '';
var delegate = this.loadResponse.createDelegate(this, [reader, callback, scope, arg], 1);
var callParams = new Array();
if(arg.arg) {
callParams = arg.arg.slice();
}

if(this.pagingAndSort) {
callParams.push(params.start);
callParams.push(params.limit);
callParams.push(sort);
}

callParams.push(delegate);
this.dwrCall.apply(this, callParams);
} else {
callback.call(scope || this, null, arg, false);
}
},

loadResponse : function(listRange, reader, callback, scope, arg) {
var result;
try {
result = reader.read(listRange);
} catch(e) {
this.fireEvent("loadexception", this, null, response, e);
callback.call(scope, null, arg, false);
return;
}
callback.call(scope, result, arg, true);
},

update : function(dataSet){},

updateResponse : function(dataSet)
{}
});

Ext.data.ListRangeReader = function(meta, recordType){
Ext.data.ListRangeReader.superclass.constructor.call(this, meta, recordType);
this.recordType = recordType;
};
Ext.extend(Ext.data.ListRangeReader, Ext.data.DataReader, {
getJsonAccessor: function(){
var re = /[\[\.]/;
return function(expr) {
try {
return(re.test(expr))
? new Function("obj", "return obj." + expr)
: function(obj){
return obj[expr];
};
} catch(e){}
return Ext.emptyFn;
};
}(),

read : function(o){
var recordType = this.recordType, fields = recordType.prototype.fields;

//Generate extraction functions for the totalProperty, the root, the id, and for each field
if (!this.ef) {
if(this.meta.totalProperty) {
this.getTotal = this.getJsonAccessor(this.meta.totalProperty);
}

if(this.meta.successProperty) {
this.getSuccess = this.getJsonAccessor(this.meta.successProperty);
}

if (this.meta.id) {
var g = this.getJsonAccessor(this.meta.id);
this.getId = function(rec) {
var r = g(rec);
return (r === undefined || r === "") ? null : r;
};
} else {
this.getId = function(){return null;};
}
this.ef = [];
for(var i = 0; i < fields.length; i++){
f = fields.items[i];
var map = (f.mapping !== undefined && f.mapping !== null) ? f.mapping : f.name;
this.ef[i] = this.getJsonAccessor(map);
}
}

var records = [];
var root = o.data, c = root.length, totalRecords = c, success = true;

if(this.meta.totalProperty){
var v = parseInt(this.getTotal(o), 10);
if(!isNaN(v)){
totalRecords = v;
}
}

if(this.meta.successProperty){
var v = this.getSuccess(o);
if(v === false || v === 'false'){
success = false;
}
}

for(var i = 0; i < c; i++){
var n = root[i];
var values = {};
var id = this.getId(n);
for(var j = 0; j < fields.length; j++){
f = fields.items[j];
var v = this.ef[j](n);
values[f.name] = f.convert((v !== undefined) ? v : f.defaultValue);
}
var record = new recordType(values, id);
records[i] = record;
}

return {
success : success,
records : records,
totalRecords : totalRecords
};
}
});



经过改造之后，那么DWR可以像JSON一样，返回的数据作为DataStore
代码片断

ds = new Ext.data.Store({
proxy: new Ext.data.DWRProxy(TodoService.getItems, true), //TotoService.getItems dwr开放出来的Java获取数据方法
reader: new Ext.data.ListRangeReader(
{id:'id', totalProperty:'totalSize'}, recordType),
remoteSort: true
});




Spring实现了强大的管理了后台的JavaBean，干干净净的注入创建了每个对象， DWR天生又是支持Spring，无缝的讲Ｓｐｒｉｎｇ的后台Bean　发布到Web层作为JavaScript对象，和JavaScript方法。中途不需要人工干预写Servlet.



不多说了，　跑了下代码，通过，可以直接下载。
download/ext-dwr-spring.rar

评论

4 楼 rock_soft 2008-02-21  

1.TodoService.getItems 怎么写的
2. {id:'id', totalProperty:'totalSize'} 这几个是干什么的   

3 楼 12True 2007-10-18  

这个示例，我怎么跑不起来？

2 楼 liuzhuangfei 2007-09-27  

附件不对，无法下载

1 楼 techno_it 2007-08-06  

DWR可以返回Json格式的串，然后通过Prototype.js（或其它）就可以转成Json的对象了。很方便，博主有时间不防试试。