结合dwr的yui-ext分页例子

最近接触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 || this, null, arg, false);

}

loadResponse : function(listRange, reader, callback, scope, arg) {

var result;

//console.debug(listRange);

try {

result = reader.read(listRange);

} catch(e) {

this.fireEvent("loadexception", this, null, 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

* 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('{0}{1}', value, record.data['operator']);

}

function renderTopicPlain(value){

return String.format('{0}', value);

}

function renderLast(value, p, r){

return String.format('{0} 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 冻僵的鱼阅读(8495) 评论(33) 编辑收藏

常用链接

留言簿(3)

随笔档案(4)

相册

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜


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




网站导航: 博客园 IT新闻知识库 C++博客博问管理