关于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'，<font color="#ff0000">renderer: renderCheckBox</font>},

{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水平，后面还有很长一段路….先扯到这继续关注。