白日不到处,青春恰自来。
苔花如米小,亦学牡丹开。
posts - 4,  comments - 34,  trackbacks - 0
      最近接触yui-ext,被它漂亮的界面征服,于是想把它运用到项目里面。
公司目前是用dwr来实现一些简单的ajax功能,想把yui-ext结合dwr,但目前网上还很少有这样的例子,参考了yui-ext论坛里面的文章,做了一个简单的分页例子(下载)
    dwrproxy.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(this.pagingAndSort) {
          
//callParams.push(params.start);
          
//callParams.push(params.limit);
          
//callParams.push(sort);
            
//}

      
//这里的arg.params包含了分页时用到的基础参数和用户查询时自定义的参数    
      callParams.push(arg.params);
      callParams.push(delegate);
      
     
//console.debug(callParams);         
     
      
this.dwrCall.apply(this, callParams);
    
    }
 else {
      callback.call(scope 
|| thisnull, arg, false);
    }

  }
,

  loadResponse : function(listRange, reader, callback, scope, arg) 
{
    var result;
    
//console.debug(listRange); 
    try {
      result 
= reader.read(listRange);
    }
 catch(e) {
      
this.fireEvent("loadexception"thisnull, 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
    }
;
  }

}
);

     paging.js,分页时的调用的写法。
  
/*

 * Ext JS Library 1.0.1

 * Copyright(c) 2006-2007, Ext JS, LLC.

 * licensing@extjs.com

 * 

 * 
http://www.extjs.com/license

 
*/




Ext.onReady(function()
{


    var recordType 
= Ext.data.Record.create([

        
{name: "id", type: "int"},

        
{name: "department", type: "string"},

        
{name: "operator", mapping:"operator.pname", type: "string"},

        
{name: "content", mapping:"content", type: "string"}

      ]);

          
    
// create the Data Store
    var ds = new Ext.data.Store({
        
// load using DWRProxy
        proxy: new Ext.data.DWRProxy(MeetingService.findMeetingby, true),

        
// create reader that reads the Topic records
        reader: new Ext.data.ListRangeReader({
            totalProperty: 
'totalSize',
            id: 
'id'
        }
, recordType),

        
// turn on remote sorting
        remoteSort: true
    }
);
    
//ds.setDefaultSort('department', 'desc');

    
// pluggable renders
    function renderTopic(value, p, record){
        
return String.format('<b>{0}</b>{1}', value, record.data['operator']);
    }

    function renderTopicPlain(value)
{
        
return String.format('<b><i>{0}</i></b>', value);
    }

    function renderLast(value, p, r)
{

        
return String.format('{0}<br/>by {1}', value, r.data['department']);
    }

    function renderLastPlain(value)
{
        
return value;
    }


    
// the column model has information about grid columns
    
// dataIndex maps the column to the specific data field in
    
// the data store
    var cm = new Ext.grid.ColumnModel([{
           id: 
'department'// id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
           header: "部门",
           dataIndex: 
'department',
           width: 
150,
           renderer: renderTopic,

           sortable: 
true,
           css: 
'white-space:normal;'
        }
,{
           header: 
"操作人",
           dataIndex: 
'operator',
           width: 
150,

           sortable: 
true,
           hidden: 
false        //    隐藏列
        }
,{
           id: 
'content',
           header: 
"内容",
           dataIndex: 
'content',
           width: 
250,

           sortable: 
true,
           renderer: renderLast
        }
]);

    
// by default columns are sortable
    
//cm.defaultSortable = true;

    
// create the editor grid
    var grid = new Ext.grid.Grid('meeting-grid'{
        ds: ds,
        cm: cm,
        selModel: 
new Ext.grid.RowSelectionModel({singleSelect:true}),
        enableColLock:
false,
        loadMask: 
true    //是否显示正在加载
    }
);

    
// make the grid resizable, do before render for better performance
    var rz = new Ext.Resizable('meeting-grid'{
        wrap:
true,
        minHeight:
100,
        pinned:
true,
        handles: 
's'
    }
);
    rz.on(
'resize', grid.autoSize, grid);

    
// render it
    grid.render();

    var gridFoot 
= grid.getView().getFooterPanel(true);

    
// add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 
5,
        displayInfo: 
true,
        displayMsg: 
'显示 {0} - {1} of {2}',
        emptyMsg: 
"没有记录"
    }
);
    
// add the detailed view button
    paging.add('-'{
        pressed: 
true,
        enableToggle:
true,
        text: 
'详细信息',
        cls: 
'x-btn-text-icon details',
        toggleHandler: toggleDetails
    }
);

    
// trigger the data store load
   
// ds.load({params:{start:0, limit:5}, extraParams:{dept:'test', viaParam:true}});        

    
//ds.load({params:{start:0, limit:5, department:'test', viaPara:true}});    

    
//ds.load({params:{start:0, limit:5}});    

    

    
//查询时需要用到的参数

    ds.on(
'beforeload', function() {

          ds.baseParams 
= {

            dept: 
'test111',

            viaParam: 
true

          }
;

        }
);    

    
//分页基本参数    

    ds.load(
{params:{start:0, limit:5}});    

        

    function toggleDetails(btn, pressed)
{
        cm.getColumnById(
'department').renderer = pressed ? renderTopic : renderTopicPlain;
        cm.getColumnById(
'content').renderer = pressed ? renderLast : renderLastPlain;
        grid.getView().refresh();
    }

}
);

  dwr调用后台的处理方式:

public ListRange findMeetingby(Map condition) {
        
// TODO Auto-generated method stub
        int totalRecords = getContentCount();
        HQuery hquery 
= new HQuery();
        hquery.setPageStartNo(Integer.parseInt(condition.get(
"start").toString()));
        hquery.setNumberPerPages(Integer.parseInt(condition.get(
"limit").toString()));
        hquery.setQueryString(
"from Meeting as a ");
        StringBuffer sb 
= new StringBuffer();
        sb.append(
"order by ");
        
if(condition.get("sort"!= null && condition.get("dir"!= null){
            sb.append(
"a.");
            sb.append(condition.get(
"sort"));
            sb.append(
" ");
            sb.append(condition.get(
"dir"));
        }
else
            sb.append(
"a.lastModifiedDate desc");
        
        hquery.setOrderby(sb.toString());
        List ls 
=  this.getBaseDao().executeQuery(hquery);
        
return new ListRange(ls.toArray(), totalRecords);
    }

   

 

posted on 2007-06-05 09:30 冻僵的鱼 阅读(8338) 评论(33)  编辑  收藏

FeedBack:
# re: 结合dwr的yui-ext分页例子[未登录]
2007-06-05 13:21 | yy
可以提供dome下载么  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-05 17:19 | 冻僵的鱼
已经加上Demo下载了  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 10:22 | 匿名
所提供的代码运行时报错,TodoService未定义,错误是从grid.js中报出来的  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 16:14 | 冻僵的鱼
由于这里只能上传2M附件,我把例子lib目录里面dwr.jar和spring.jar删掉了,你把dwr2.0.1、Spring2.0.4放进去就能运行了。
  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 16:14 | hama
盗版  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 16:14 | hama
完全盗版  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 16:46 | 冻僵的鱼
我也已经说过是参考了yui-ext论坛里面的文章,但它那个例子有些问题,翻页和排序时自定义的参数传掉,在这基础上做了一些改动,在IE7和FF都测试通过。  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 17:42 | 匿名
我放了的,共放了3个jar:commons-logging-1.0.4.jar、dwr.jar、spring.jar,但出现TodoService未定义的错误
to:冻僵的鱼 这个代码你运行正常?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-06 17:58 | 冻僵的鱼
代码是测试通过的,你看下是不是DWR与tomcat有冲突了,看下tomcat日志  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-07 14:41 | 匿名
原来是我把dwr的包弄错了,我用的是1.1的包,换成2.0.1就正常了,谢谢  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-15 12:18 | mican
你的那个 dwrproxy.js 是否是通用的,就是我改了一下grid.js 里的recordType,有个字段为时间类型,我是这样设置的
var recordType = Ext.data.Record.create([
{name: "id", type: "int"},
{name: "user",mapping:"aMsg.user", type: "string"},
{name: "sayto", mapping:"aMsg.sayto", type: "string"},
{name: "content",mapping:"aMsg.content", type: "string"},
{name: "sendtime", mapping:"aMsg.sendtime", type: "date",dateFormat: 'timestamp'}
]);
但是运行的时候他老抱这个错:Error: TypeError, 'response' 未定义,请指点  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-15 15:17 | 冻僵的鱼
你的aMsg.sendtime是什么日期类型的?
我测试过java.util.Date和java.sql.Timestamp都正常~~  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-15 15:57 | 解冻的鱼
我也来试试,谢谢斑竹  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-15 16:30 | 解冻的鱼
不错,我在新公司可以借鉴。
我以前公司的ajax界面,可以做到上边是每条记录的form,下边是list列表,两个公用一个dataset,类似dephi.我发现workshop可以实现这样的功能,yui不知道可不可以。  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-16 13:34 | mican
冻僵的鱼 能说说ds 和cm里 的时间类型你是怎么定义的,比如我返回的数据里的时间格式是:yyyy-MM-dd hh:mm:ss  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-18 09:32 | 冻僵的鱼
to mican
只需要在cm定义指定一个renderer就可以了
var cm = new Ext.grid.ColumnModel(
[

{
header: 'Reg Date',
width: 150,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y/m/d'),
dataIndex: 'regDate'
}
]
);  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-18 09:40 | 冻僵的鱼
to 解冻的鱼
我也在尝试实现类似你所说的那种效果,对于yui,我也是刚接触不久,希望有空可以多交流AJAX技术,MSN:zyh2k at msn.com。  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-22 09:57 | 解冻的鱼
我看了yui-ext的form,是store刷新的,应该可以实现我说的那种功能。
yui-ext其实是无所不能的,还支持拖动,太牛了。  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-06-22 10:03 | 解冻的鱼
我的msn:matt_wang129@hotmail.com,多交流  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-07-12 19:20 | Harrison
感谢大虾的帮助先!
我的问题:
ReferenceError: response is not defined

怎么回事?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-07-13 09:33 | 冻僵的鱼
to Harrison:
在dwr调试页面对调用的方法测试正常不?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-07-13 10:49 | Harrison
To 冻僵的鱼
十分感谢您的回复先!
没错,我的DWR调用很正常,后台Debug时,在service里也返回的正常的数据。在FF下的FireBug中也看到了script的response。

另外,我的msn: gyao1979@hotmail.com , 想和您深入交流。谢谢!  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-08-12 23:33 | jiajiacat
谢谢,不过 findMeetingby(Map condition) 非范型,dwr老是出
WARN DefaultConverterManager:59 - Missing type info for getItems(0<0>). Assuming this is a map with String keys. Please add to <signatures> in dwr.xml的警告,如何解决?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-08-15 10:20 | xx
根本就显示不出数据,dwr以及该目录下的js怎么没有?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-08-31 09:28 | 冻僵的鱼
@jiajiacat
dwr.xml配置一下signatures就行了  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-08-31 09:30 | 冻僵的鱼
@xx
由于这里只能上传2M附件,我把例子lib目录里面dwr.jar和spring.jar删掉了,你把dwr2.0.1、Spring2.0.4放进去就能运行了。
  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-09-27 17:29 | xpy
十分感谢您!还有些问题想问问。我MSN:z278440337@126.com  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-11-08 17:26 | powe
麻烦楼主解答下,我后台返回的数据是个List类型的,List的元素是Bean,那为什么页面没数据显示阿,也没报错。ListRange类型的我的包里怎么没有!  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2007-12-13 15:40 | 冻僵的鱼
@powe
不好意思,最近比较忙,很少上blog
"List的元素是Bean", 你在dwr.xml有没有定义相应的convert bean?
例子里面的ListRange类,你可以不使用它,只需要在后台按格式封装数据就行:
public ListRange findMeetingby(Map condition) {
.......
hquery.setOrderby(sb.toString());
List ls = this.getBaseDao().executeQuery(hquery);
//return new ListRange(ls.toArray(), totalRecords); //这里可以不使用ListRange类

Map result = new HashMap(2);
result.put("totalSize", new Integer(totalRecords));
result.put("data", ls.toArray());
return result;
}
  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2008-02-28 22:27 | jw
这个支持排序吗,在哪个地方啊?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2008-03-15 22:40 | yinhao
看来楼主,对EXT有很深的研究呀.
小弟,最近出现了一个问题,烦了我好几天呀.不知道楼主能不能帮小弟解决一下.
在下,不胜感激.

当我访问DWR里面的方法时,数据返回正常.可是到页面EditGrid里面却只有列标题.表格里面没有任何数据.而且,页面也没有报错.

急救.


  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子[未登录]
2008-04-02 16:40 | sean
怎么没有排序的功能啊?  回复  更多评论
  
# re: 结合dwr的yui-ext分页例子
2010-02-16 15:45 | kingdy
非常感谢分享,在搞一个ext和dwr整合的项目,现在问题解决了。  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 

<2007年6月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(3)

随笔档案(4)

相册

搜索

  •  

积分与排名

  • 积分 - 13381
  • 排名 - 1965

最新评论

阅读排行榜

评论排行榜