最近开始学习ExtJS,发现其与DWR之间还是存在不太协调之处,其实我的需求很简单:就是在Ext的store对象能调用DWR暴露的接口,并将数据写的STORE中。于是GOOGLE了一下,发现以下东东:
Ext.data.DWRProxy = function (fn) ... {
Ext.data.DWRProxy.superclass.constructor.call(this);
this.fn = fn;
} ;
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, ... {
load : function(params, reader, callback, scope, arg)...{
params = params || ...{};
if(this.fireEvent("beforeload", this, params) !== false)
...{
var proxy=this;
this.fn(params,function(ret)...{
var result;
try
...{
var o = eval("("+ret+")");
//alert(o);
result = reader.readRecords(o);
}catch(e)
...{
this.fireEvent("loadexception", this, arg, null, e);
callback.call(scope, null, arg, false);
return;
}
//alert('call back');
callback.call(scope, result, arg, true);
});
}
}
} );
但调用时发现根本无法调用。
调用代码如下:
var grid;
Ext.onReady( function (){
grid = getRegion();
});
function getRegion()
{
var store = new Ext.data.DWRStore({
id: " code " ,
fn:ServerParserImpl.test,
fields:[{name: ' year ' },
{name: ' code ' },{name: ' name ' },
{name: ' province_shortname ' },
{name: ' owner ' },
{name: ' level ' },{name: ' area ' },
{name: ' pepole ' },
{name: ' place ' },{name: ' postcode ' },
{name: ' recordStatus ' }]
});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer({width: 50 }),
{header: " 年 " ,dataIndex: " year " ,sortable: true },
{header: " 行政区编码 " ,dataIndex: " code " ,sortable: true },
{header: " 行政区名称 " ,dataIndex: " name " ,sortable: true },
{header: " 所属省份简称 " ,dataIndex: " province_shortname " ,sortable: true },
{header: " 所属省份 " ,dataIndex: " owner " ,sortable: true },
{header: " 级别 " ,dataIndex: " level " ,sortable: true },
{header: " 面积 " ,dataIndex: " area " ,sortable: true },
{header: " 人口 " ,dataIndex: " pepole " ,sortable: true },
{header: " 地区 " ,dataIndex: " place " ,sortable: true },
{header: " 邮编 " ,dataIndex: " postcode " ,sortable: true },
{header: " 记录状态 " ,dataIndex: " recordStatus " }
]);
var grid = new Ext.grid.GridPanel({
store:store,
cm:cm,
loadMask: {msg: ' 正在加载数据,请稍候…… ' },
frame: true ,
tbar:[{pressed: true ,text: ' 查询 ' ,handler:query},
{pressed: true ,text: ' 增加 ' ,handler:add},
{pressed: true ,text: ' 删除 ' ,handler:remove},
{pressed: true ,text: ' 修改 ' ,handler:edit},
{pressed: true ,text: ' 保存 ' ,handler:save}]
});
new Ext.Viewport({layout: " fit " ,items:grid});
store.load({params:[ " str1 " ,[{year: 2008 ,code: ' 1000000 ' }], 56.90 ]});
return grid;
}
经过多方分析,需要修改DWRProxy中的load,修改如下:
Ext.data.DWRProxy = function (fn){
Ext.data.DWRProxy.superclass.constructor.call( this );
this .fn = fn;
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function (params, reader, callback, scope, arg){
params = params || {};
if ( this .fireEvent( " beforeload " , this , params) !== false )
{
var proxy = this ;
// dwr回调函数
dwrcallback = function (ret){
var result;
try
{
var o = eval( " ( " + ret + " ) " );
result = reader.readRecords(o);
} catch (e)
{
this .fireEvent( " loadexception " , this , arg, null , e);
callback.call(scope, null , arg, false );
return ;
}
callback.call(scope, result, arg, true );
}
// 需要将参数加入到调用参数
var callParams = new Array();
for ( var i = 0 ; i < params.length; ++ i)
{
callParams.push(params[i]);
}
// 将回调函数加入的参数数组
callParams.push(dwrcallback);
this .fn.apply( this , callParams);
}
}
});
现将所有与DWR相关的EXTJS类贴出,希望能给与我一样的初学者一些帮助:
Ext.data.DWRProxy = function (fn){
Ext.data.DWRProxy.superclass.constructor.call( this );
this .fn = fn;
};
Ext.extend(Ext.data.DWRProxy, Ext.data.DataProxy, {
load : function (params, reader, callback, scope, arg){
params = params || {};
if ( this .fireEvent( " beforeload " , this , params) !== false )
{
var proxy = this ;
// dwr回调函数
dwrcallback = function (ret){
var result;
try
{
var o = eval( " ( " + ret + " ) " );
result = reader.readRecords(o);
} catch (e)
{
this .fireEvent( " loadexception " , this , arg, null , e);
callback.call(scope, null , arg, false );
return ;
}
callback.call(scope, result, arg, true );
}
// 需要将参数加入到调用参数
var callParams = new Array();
for ( var i = 0 ; i < params.length; ++ i)
{
callParams.push(params[i]);
}
// 将回调函数加入的参数数组
callParams.push(dwrcallback);
this .fn.apply( this , callParams);
}
}
});
/* *
* Ext.data.DWRStore实现对DWR调用后返回的记录进行存储
* 当调用的DWR方法返回的是JSON对象时,使用此存储类进行管理
*/
Ext.data.DWRStore = function (c){
Ext.data.DWRStore.superclass.constructor.call( this , Ext.apply(c, {
proxy: c.fn ? new Ext.data.DWRProxy(c.fn): undefined,
reader: c.reader ? c.reader : new Ext.data.JsonReader(c, c.fields)
}));
};
Ext.extend(Ext.data.DWRStore, Ext.data.Store);
后台JAVA方法定义:public String test(String str1,List lst,Double dbvalue){return "[{year:2008}]"}