Ext 解说（二）
关于YUI-EXT 变为 EXT的话题让人纷说已久，而又过了短短几日，EXT 又紧锣密鼓的发行了Alpha 3。<从YUI-EXT0.40 到 EXT1.0Alpha2,Jack向YUI挑战 ，EXT lib支持JQuery,可以完全可以独立于YUI了。不过这次，Jack似乎又一次开始新一轮的自我挑战。1.0Alpha3版本开始增加了Prototype 和ScriptAculous,真是让人迫不及待。
好，还是先看看 的例子。 这次不用帖代码了，官方出的指南已经很详细了。
教程：http://www.extjs.com/en/tutorial/introduction-ext
毕竟是个入门性的，要玩些花样还得看API （可惜JACK的API-DOC还没来得及更新到最新) 。
教程中：Grid实现
{
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(myData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid.render();
grid.getSelectionModel().selectFirstRow();
});
Grid变化很大，从这里可以看出它和0.33,0.40的差别了。整个数据的是通过DataStore对象来完成的，数据读取通过XXXReader完
成,（这里是ArrayReader,还有JsonReader,XHReader等）变单元格格式设置ColumnModel完成（任何数据源都一
样），较原来稍有清晰（不然Jack也不会花那么大力气去改了，但真正的出发点是否还有其他？？）
那这里也可以很方便的通过通过reader来实现。其他什么超连接啊，input啊都可以那么做。
增加一个function
function renderCheckBox(id){
return String.format(' type="checkbox" id={0} );
// 然后，增加红色部分。这样就会下在 Company每列前面多了个CheckBox
colModel = new Ext.grid.ColumnModel([
{header: "Company", width: 120, sortable: true, dataIndex: 'company'，renderer: renderCheckBox},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex:
'pctChange'},{header: "Last Updated", width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex:
'lastChange'} ]);
另外我们还可能会用到分页（在官方的Example里面 可以看到例子）。在1.0中，Jack是努力简化了Grid的操作，这里对分页处理也比以前简单了。
var gridFoot = grid.getView().getFooterPanel(true);
var pagbar = new Ext.PagingToolbar(gridFoot, ds, {pageSize: 20});
pagbar.add('-', {pressed: true, enableToggle:true, text: 'Detailed
View',cls: 'x-btn-text-icon details', toggleHandler: toggleCheckBox
});
ds.load({params:{start:0, limit:20}});
可以在官方的例子中看到更详细的。
http://www.yui-ext.com/deploy/ext-1.0-alpha3/examples
如果再玩复杂一点就是一些自定的操作， grid.on的事件操作啊，通篇一律的JS回调操作。
数据更新采用 Ext.data.Connection(); 表单采用 = Ext.form; /
这样几本能完成一个企业级的Grid应用了，分页编辑，提交。 稍微酷一些可结合 GridEditor
Ext 的代码质量也非常不错,可惜大的方面玩玩能揣度个八九不离十，但真要西子到每个API如何使用，为什么这么写，光凭自己现在的JS水平，后面还有很长一段路....先扯到这继续关注。
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 ，这样，在事件的触发下，远程的分页数据就到到你的页面上了。
YUI 一周岁生日了。
有点宣传的味道，，但是我很喜欢YUI.
如果把Nasdaq上的Yahoo,和 网易163相比。
Yahoo 是总结出了一套 Ajax Pattern Libaray YUI-LIB,
163则似乎是给我们秀了一下51js的代码
163在营养和发育上要狠狠的追敢啊。
YUI一周岁了，可以看到他的很多LIB都已经很成熟了。
http://developer.yahoo.com/yui/
http://yuiblog.com/
盼他快快长大。茁壮的成长。
YUI周岁 YUI TEAM祝贺：
http://yuiblog.com/blog/2007/03/05/pattern-library-anniversary/
powered by performancing firefox
不管Ajax是否是明日黄花，历史会见证这一刻。
由 Ajax In Action 一书收集提供的ajax 库，将它们搬了上来。
尽管这些信息已经算是比较老的，但是Ajax库的积累和开发并非一蹴而就，需要一个时段的沉淀和积累。
如下： 其中有我们非常熟悉的 DWR,Dojo,Prototype，ScriptAculous,Qooxdoo，RubyOnRails(主要集成了Prototype和Scriptaculous) 都依然在活跃着不断更新和迈进。
Accesskey Underlining Library 开源
www.gerv.net/software/aul/
ActiveWidgets 商业产品，可免费下载
www.activewidgets.com
Ajax JavaServer Faces Framework 开源 （Apache GPL）
http://smirnov.org.ru/en/ajax-jsf.html
Ajax JSP Tag Library 开源
http://ajaxtags.sourceforge.net/
Ajax.NET （2005）未说明学科，可免费使用
http://weblogs.asp.net/mschwarz/
AjaxAC 开源产品 Apache2.0
http://ajax.zervaas.com.au
AjaxAspects 免费使用有原码
http://ajaxaspects.blogspot.com
Michael Mahemoff (2005) 开源 产品
http://ajaxify.com/run/testAjaxCaller
AjaxFaces 开源产品 Apache
http://myfaces.apache.org/
BackBase 商业产品，有免费的社区版
http://www.backbase.com
Behaviour 开源产品
www.ripcord.co.nz/behaviour/
Bindows 商业产品
www.bindows.net
BlueShoes 商业产品，有免费版本
www.blueshoes.org
CakePHP 开源产品
http://cakephp.org/
CL-Ajax Richard Newman (2005) 开源产品
http://cliki.net/cl-ajax
ComfortASP.NET 预发布商业软件，有免费版本
www.daniel-zeiss.de/ComfortASP/
Coolest DHTML Calendar 开源产品，有商业支持
www.dynarch.com/projects/calendar/
CPAINT （跨平台的可异步方式通讯的工具包） GPL许可
http://cpaint.sourceforge.net
Dojo Alex Russell(2004) 开源产品
http://dojotoolkit.org
DWR (直接远程调用 ) 开源产品 Apache许可
www.getahead.ltd.uk/dwr
Echo 2 开源产品（MPL或者GPL许可）
www.nextapp.com/products/echo2
f(m) 开源产品
http://fm.dept-z.com/
FCKEditor 开源产品
www.fckeditor.net
Flash JavaScript Integration Kit 开源产品
www.osflash.org/doku.php?id=flashjs
Google AjaxSLT 开源产品（BSD许可）
http://goog-ajaxslt.sourceforge.net
Guise 商业产品，可免费下载
www.javaguise.com
HTMLHttpRequest Angus Turnbull (2005) 开源产品
www.twinhelix.com/JavaScript/htmlhttprequest/
Interactive Website Framework 开源产品
http://sourceforge.net/projects/iwf/
Jackbe 商业产品
www.jackbe.com/solutions/development.html
JPSpan 开源产品 PHP许可
http://jpspan.sourceforge.net/wiki/doku.php
jsolait LGPL许可
http://jsolait.net
JSON 开源产品，大部分实现使用LGPL许可
www.json-rpc.org/
JSRS (JavaScript Remote Scripting) 开源产品
www.ashleyit.com/rs/jsrs/test.htm
LibXMLHttpRequest Stephen W. Coate (2003) 源码可下载，有版权保护
www.whitefrost.com/servlet/connector?file=reference/2003/06/17/libXml-Request.html
Mochikit 开源产品(MIT许可)
www.mochikit.com/
netWindows 开源产品
www.netwindows.org
Oddpost 商业产品
www.oddpost.com
OpenRico Bill Scott, Darren James (2005) 开源产品
http://openrico.org
Pragmatic Objects 开源产品
http://pragmaticobjects.com/products.html
Prototype Sam Stephenson (2004)开源产品
http://prototype.conio.net/
Qooxdoo 开源产品 LGPL许可
http://qooxdoo.sourceforge.net
RSLite Brent Ashley (pre-2000)
www.ashleyit.com/rs/main.htm
Ruby on Rails David Heinemeier Hansson (2004) 开源产品（MIT许可）
www.rubyonrails.org
Sack 开源产品（修改过的MIT/X11许可）
http://twilightuniverse.com/2005/05/sack-of-ajax
SAJAX 开源产品
www.modernmethod.com/sajax
Sarissa 开源产品
http://sarissa.sf.net
Scriptaculous Thomas Fuchs (2004) 开源产品
http://script.aculo.us
SWATO… 开源产品Apache许可
http://swato.dev.java.net
Tibet 商业软件
www.technicalpursuit.com
TinyMCE 开源产品有一定的商业支持和专有插件
http://tinymce.moxiecode.com/
TrimPath Templates 开源产品
http://trimpath.com/project/wiki/JavaScriptTemplates
Walter Zorn’s DHTML Libraries 开源产品
www.walterzorn.com/index.htm
WebORB for .NET 商业产品有免费版本
www.themidnightcoders.com/weborb/aboutWeborb.htm
WebORB for Java 商业产品，有免费版本
www.themidnightcoders.com/weborb/aboutWeborb.htm
x Mike Foster (2005) 开源产品
www.cross-browser.com
XAJAX J. Max Wilson (2005) 开源产品
http://xajax.sf.net
x-Desktop 开源产品，GPL许可
www.x-desktop.org/
XHConn Brad Fults (2005)
http://xkr.us/code/JavaScript/XHConn
当一切成为主流，一切就将意味着淘汰。
在一大堆生活琐事中很快的消磨到了06年年底，30就快来临，却发现还有很多事要办，难免让人觉得有点无为。。。 生活的确占了生命中很大的意义，但是，工作和你的职业生涯如果没有半点成就，也会让人觉得人生索然无味。
不过，一切的顺意都要靠自己的努力去争取。
06年，Spring和Ajax占尽了风头，一切由Spring所支持的项目，在这个年度，迅速走红。 一切已经走红的项目，被Spring支持了也越来越红。而Ajax让客户体验发挥到了极致，也让人逐渐了解到了那些破费心血的Compents,Framework....诸如Dojo,Dwr,Rico,Prototype,Scriptaculous,而，在人们面前凉了很久（10年 - 97年诞生的1.1版本）的Javascript也被空前的掀起一股深入学习的热潮。
然而历史的每次推动，都是以新老事物的替换来做标记的
。当我们在热衷这些迅速走红的事物中组建体味到软件开发的优雅事，很多我们以前执着过的事物，开始让人忘淡。----
记得04，05年我们都纷纷谈论着设计模式，然而有人也渐渐在复杂的体系中自缚。 当我们谈论敏捷，谈论XP,谈论简化开发，谈论高效编程，谈论简单即美的时候， 开始不造轮子的时候，我的工作开始越来约追求简单，约来约注重高效。 我们的谈论我们的开发方式似乎有了些变化。
也许我现在还不能什么是主流，什么是淘汰。
前几天一个朋友很高兴的给我的讲诉，html可以走了，复杂的ajax可以不玩了，我似乎无法一下子接受这种刚成为主流的东西被遭到如此的评价。。。 接下去，我也渐渐开始尝试着Flex 做一些东西。，当我把简单的Compents托拽为一个应用时， 在体味.js和html在不同浏览器之间的支持要做那这个那个的处理时，，Flash 这种方式不觉已经开始在各种场合登场了。随着HttpService,WebService,DataSerice这些的很方便的支持，FLex无疑成了UI的一个有利工具，相比之下Ajax显得略微的复杂，稍微的逊色。于此同事M$也在推着他.NET2.0下的Expression, 顿时感觉，下一年将会笼罩着RIA的硝烟。。 直到前天，在孟岩和韩磊的博客上看到 "这一天终于来了"，，于是，我跟着承认，有些东西是该退出历史舞台了。。
好友Leemaasn还保持联系，这位在我看来的技术天才很是乐观，他说的对，“只要我们的思想能能与时俱进，也就不用担心那么多了”，，我们的年龄的确会越来越老的，但是利用这些年的经验和积累，我们会更加知道我们需要什么。
业务领域成了软件开发的一根救命稻草，当技术我们更新不上的时候，当理论我们不够扎实的时候，我们能依靠这些年来的经验， 来去比知道做出的软件更多的功能，看到架构的不足和优点， 比将要使用的软件的客户知道的更多使用和需求，激发潜在需求。。。。
那，我们依然是主流。