论坛首页 AJAX版 EXT

贴一下我改的dwrproxy(使得EXT能调用DWR取得数据)

浏览 4052 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
最后更新时间:2007-07-16
看到大家在讨论dwrproxy,贴一下我的经验

先说明一下:在ext论坛上找到的dwrproxy是有错误的,需要自己改一下才能用

修改后dwrproxy代码:
/**
 * DWR proxy for the store
 */
Ext.data.DWRProxy=function(config){
  Ext.data.DWRProxy.superclass.constructor.call(this);
  Ext.apply(this, config || {});
};

Ext.extend(Ext.data.DWRProxy,Ext.data.DataProxy,{
  load:function(params,reader,callback,scope,arg){
    document.dwr={params:params,reader:reader,callback:callback,scope:scope,arg:arg};
    if(this.params!==undefined&&this.params!==null) {
      this.callback.call(this, this.params, this.loadResponse);
    } else {
      this.callback.call(this, this.loadResponse);
    }
  },
  loadResponse:function(response){
    var dwr=document.dwr;
    delete document.dwr;
    var result;
    try{
      result=dwr.reader.read(response);
    }
    catch(e){
      //this.fireEvent("loadexception",this,dwr,response,e);
      dwr.callback.call(dwr.scope,null,dwr.arg,false);
      return ;
    }
    dwr.callback.call(dwr.scope,result,dwr.arg,true);
  },
  failure:function(errorString, exception){
    console.log("DWR " + exception);
  },
  update:function(params,records){
  }
});

Ext.data.ObjectReader=function(meta,recordType){
  Ext.data.ObjectReader.superclass.constructor.call(this,meta,recordType);
};

Ext.extend(Ext.data.ObjectReader,Ext.data.DataReader,{
  read:function(response){
    var sid=this.meta?this.meta.id:null;
    var recordType=this.recordType,fields=recordType.prototype.fields;
    var records=[];
    var root=response;
    for(var i=0;i<root.length;i++){
      var obj=root[i];
      var values={};
      var id=obj[sid];
      for(var j=0,jlen=fields.length;j<jlen;j++){
        var f=fields.items[j];
        var k=(f.mapping!==undefined&&f.mapping!==null)?f.mapping:f.name;
        var v=null;
        var idx=k.indexOf(".");
        if(idx == -1) {
        	v=obj[k]!==undefined?obj[k]:f.defaultValue;
        } else {
        	var k1=k.substr(0, idx);
        	var k2=k.substr(idx+1);
        	if(obj[k1]==undefined) {
        		v=f.defaultValue;
        	} else {
        		var obj2=obj[k1];
        		v=obj2[k2]!==undefined?obj2[k2]:f.defaultValue;
        	}
        }
        v=f.convert(v);
        values[f.name]=v;
      }
      var record=new recordType(values,id);
      records[records.length]=record;
    }
    return {
      records:records,
      totalRecords:records.length
    };
  }
});


用法示例:
    var FormDetail = Ext.data.Record.create([
          {name:"id", type: 'string'},
          {name:"product.id", type: 'string'},
          {name:"product.code", type: 'string'},
          {name:"product.name", type: 'string'},
          {name:"unit", type: 'string'},
          {name:"quantity", type: 'float'}
      ]);

    var masterId=eval(document.getElementById('inquiryMasterForm_inquiryMaster_id').value);
    var ds=new Ext.data.Store({
      proxy:new Ext.data.DWRProxy({callback:inquiryMasterAction.getDetailsByMasterId, params:masterId}),
      reader:new Ext.data.ObjectReader({id:"id"}, FormDetail)
    });
    ds.load();


简单说明一下:

1.dwrproxy的构造函数需要一个参数,该参数是一个对象,该对象可以有两个属性:
callback - 你需要调用的由DWR生成的方法。这个是必须传入的
params - 需要调用的方法所需的参数。注意两点:1)如果无参数就不需要传入了;2)现在只支持传入一个参数,要传入多个参数需要你自行扩展

2.可以看到FormDetail的定义为一个一维数组,但DWR返回的是一个广义数组,ObjectReader的构造函数根据参数recordType中每个列名是否包括点号(.)来判断是否需要取嵌套的数据。比如对于FormDetail,DWR返回一个数组,包括id,product,unit,quantity共4个元素,其中product是一个嵌套的数组,包括id,code,name共3个元素。ObjectReader尝试为product.id这个列赋值时会先找到product,然后取它的id元素的值

3.使用该dwrproxy需要注意:不能连续两次执行dwr调用。比如你在脚本中创建一个Store对象、调用dwr取得数据,并读取它(执行该Store的load()方法)的数据,随后立即创建另一个Store对象、调用dwr取得数据,并读取它(执行该Store的load()方法)的数据,结果DWR能返回两个对象的数据,但执行第二个Store对象的load()方法时会出错,出错的表面原因是ObjectReader读取不到数据。这很奇怪,我还没有弄清楚真实原因。暂时的办法是把第二个Store对象的load()方法改到某个事件里调用(比如combobox下拉时),让它在页面已经显示出来、渲染后再执行。如果有朋友能解决两次dwr调用之间的同步问题,希望你能把解决办法贴出来共享一下。
   
最后更新时间:2007-07-19
一点修正:

当在IE中执行此脚本时会报如下错误:
引用
Error: TypeError, 对象不支持此操作


请将以上代码第20行更改为:

    try {
      //IE throws an exception 'Error: TypeError, Object does not support this operation'
      //so use try...catch... to suppress this exception
      delete document.dwr;
    }
    catch(e) {
    }
   
0 请登录后投票
最后更新时间:2007-08-10
前天看到Struts2有个Json的plugin,所以就有个想法,用这个去取数据如何,成功了,不过分页还没搞定。
<action name="test" class="resourceAction" method="test">
<result type="json">
<param name="excludeProperties"></param>
<param name="root">map</param>
</result>
</action>
   
0 请登录后投票
最后更新时间:2007-10-29
不知道楼主如何处理多表查询??
   
0 请登录后投票
最后更新时间:2007-12-02
kaki 写道
不知道楼主如何处理多表查询??



你也太心急了,我们不得不说DWRProxy就是一种的尝试,简单问题解决了,复杂问题会解决的.
再说了多表查询是后台的问题,DWRProxy是作为ext和DWR的一个代理.
   
0 请登录后投票
最后更新时间:2007-12-02
网上有一篇英文的文章:
http://extjs.com/forum/showthread.php?t=4227
   
0 请登录后投票
最后更新时间:2007-12-21
请问

怎么我的数据能返回啦..

但是grid就只有Loading呢..

这是firebug中返回的数据

//#DWR-INSERT

//#DWR-REPLY

var s0={};var s2={};var s1={};var s3={};s0.classInfo="fds";s0.className="05ACCP3";s0.id="402881f016528bf30116528c93f90002"

;s0.userCollege=s2;

s2.collegeInfo="\u6539\u4E0B\u4E5F";s2.collegeName="\u8BA1\u7B97\u673A\u5DE5\u7A0B\u5B66\u9662";s2.id

="402881f01652384d0116523abe250003";

s1.classInfo="fsd";s1.className="fds";s1.id="402881f016c6d7070116c702e4640002";s1.userCollege=s3;

s3.collegeInfo="\u5916\u56FD\u5B66\u9662";s3.collegeName="\u5916\u56FD\u8BED\u5B66\u9662";s3.id="402881f0167b0c7501167b45d3de000a"

;

dwr.engine._remoteHandleCallback('0','0',[s0,s1]);

js文件中的代码
        var userclasstype = Ext.data.Record.create([
{name: "id", mapping: "id", type: "string"},
{name: "className", mapping: "className", type: "string"},
{name: "classInfo", mapping: "classInfo", type: "string"},
{name: "userCollege.id", mapping: "userCollege.id", type: "string"},
{name: "userCollege.collegeName", mapping: "userCollege.collegeName", type: "string"},
{name: "userCollege.collegeInfo", mapping: "userCollege.collegeInfo", type: "string"},
]);

var ds = new Ext.data.Store({
       proxy : new Ext.data.DWRProxy({callback:classAction.findAllClass_Ajax}), 
reader:  new Ext.data.ArrayReader({id: 'id'},userclasstype),
remoteSort: false
    });
var colModel  = new Ext.grid.ColumnModel(
[
new Ext.grid.RowNumberer(),
{header: "班级序号", width: 250, sortable: true, dataIndex: 'id'},
{header: "班级名字", width: 250, sortable: true, dataIndex: 'className'},
{header: "班级信息", width: 250, sortable: true, dataIndex: 'classInfo'},
{header: "学院序号", width: 250, sortable: true, dataIndex: 'userCollege.id'},
{header: "学院名字", width: 250, sortable: true, dataIndex: 'userCollege.collegeName'},
{header: "学院信息", width: 250, sortable: true, dataIndex: 'userCollege.collegeInfo'}
]
);
colModel.defaultSortable=true;

var ClassManageEditorGridPanel = new Ext.grid.EditorGridPanel({
                        store: ds,
                        cm: colModel,
                        //selModel: new Ext.grid.RowSelectionModel(),
                        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
                        loadMask :true,
                        autoSizeColumns: true,
                        enableColLock:false,
buttonAlign:'top', 
tbar:
[{ 

        text: '新增', 
        handler :doAdd 
    },{ 
        text: '删除', 
        handler : doDel 
    }//,collegesortComboBox
    ] 
                    });
用的是ext2.0-rc1
   
0 请登录后投票
论坛首页 AJAX版 EXT

跳转论坛:
JavaEye推荐