ExtJS中回调DWR方法

本文介绍如何在ExtJS中集成DWR技术,通过详细示例代码展示如何配置Ext.data.DWRProxy及Ext.data.DWRStore来实现数据交互。解决实际应用中遇到的问题,并提供完整的DWR相关的ExtJS类实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近开始学习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}]"}

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值