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

powered by performancing firefox

评论

2 楼 zyf0808 2007-09-14  

基本上扒的官方的代码，自己的部分似乎有错误
function renderCheckBox(id){
return String.format(' type="checkbox" id={0} );
一个单引号，函数还没有结束的}

1 楼 xinghai017 2007-08-16  

  你太牛B了