UI 1.0 alpha2 已经可以抢先与预览了。

而令企业应用中 较为关注的Paging Grid 有了较大的改变。

在 0.33 中。已经出现了Paging Grid , Jack 没把 Paging Grid 加入到他的Example中，而是在Blog里稍微展示了一下，可见其早有打算，，而一直没发行的0.40也把JSON 和 XML 合并了成了XHR…. 看来Jack早有打算。

先看下早期的 0.33 实现吧。先拿一个我实现过的例子

示例如下：

var CutTarget = {

loadData : function(){

var schema = {root: 'cutTargets',

id: 'nothing',

fields: ['USER_NAME', 'ACCESS_NUMBER','PROD_SPEC','DESC','DEMO']};

var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);

dataModel.getTotalRowCount = function(){

return 500; // or whatever your count is

}

dataModel.initPaging('../cutTask.do?method=findCutObject', 20);

dataModel.pageUrl ='../cutTask.do?method=findCutObject';

dataModel.baseParams['cutTypeId'] = 1;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide

// custom or reusable ColumnModels

var colModel = new YAHOO.ext.grid.DefaultColumnModel([

{header: "用户名称", width: 200, sortable: true, sortType: sort.asUCString},

{header: "号码", width: 75, sortable: true, sortType: sort.asUCString},

{header: "产品规格", width: 75, sortable: true, sortType: sort.asUCString},

{header: "用户详情", width: 75, sortable: true, sortType: sort.asUCString},

{header: "描述", width: 85, sortable: true,renderer: italic}

]);

// sortTypes provide support for custom sorting comparison functions

// not needed for this table but here for demonstration

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// create the Grid

var grid = new YAHOO.ext.grid.Grid('cutTarget-grid', dataModel, colModel);

grid.render();

var url ="../cutTask.do?method=findCutObject";

dataModel.loadPage(1);

}

};

这里实现较为烦琐。

大致步骤是：

格式设定
var schema = {root:xxx,id:xxxx,fields:[xxxxx]}

加入带schema 的格式。 并使用dataModel 作为数据模型的主控类。 设定总数据量，初始参数，初始页面大小等等

var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);

建立colModel 单元格模型

var colModel = new YAHOO.ext.grid.DefaultColumnModel([xxxx]);

排序

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

DataGrid

var grid = new YAHOO.ext.grid.Grid(‘cutTarget-grid’, dataModel, colModel);

将数据加载到 cutTarget-grid html上的元素中去。

最后由dataModel,完成loadpage ，这样，在事件的触发下，远程的分页数据就到到你的页面上了。

Tags: ext, grid