最近开始学习ExtJS,发现其与DWR之间还是存在不太协调之处,其实我的需求很简单:就是在Ext的store对象能调用DWR暴露的接口,并将数据写的STORE中。于是GOOGLE了一下,发现以下东东:









































但调用时发现根本无法调用。
调用代码如下:
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);
}
}
});
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);
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}]"}