Flex 与 Ajax的完美结合
谁掌控了已经来临的RIA,Flash Or Ajax..其实不然？两者的完美结合才是一个高的境界。
前两天刚发布的Apllo公开测试版，随即也发放了一些详细的Document和 Example. 今天就领略到了Adobe的风采，Adboe Labs又发放了几个和Ajax结合很好的Examples,其中就选择采用我最近在使用的 Ext (YUI-EXT), Examples下来一运下，帅呆了！（看来Jack的魅力不小！：）http://labs.adobe.com/wiki/index.php/Apollo:Applications:Samples
"Fresh is a skinnable RSS reader built entirely using AJAX running on Apollo. The Fresh reader features offline RSS reading, multiple panels within a single window, tabbed browsing, and basic browser integration. Fresh is based on the YUI-Ext / Ext JS library and RSS Feed Viewer sample by Jack Slocum. "
EXT(YUI-EXT) Paging Grid 详细解说 （一）
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 ，这样，在事件的触发下，远程的分页数据就到到你的页面上了。