请跟我来--使用Ext搞个原型

来源：pcdog 作者：佚名出处：巧巧读书 2008-01-03 进入讨论组

关键词：
update
delphi
html
.net
ddn

QQRead:http://www.qqread.com/aspdotnet/r390240.html

   Ext本身就带有比较专业和酷的示例，这也是Ext明显强过其他js框架的地方，所以大家最好少看那些简单翻译一下就发表的示例，实在是浪费时间。关于一些高级的用法，最佳方式就是看源码和其他比较好的扩展控件写法，当然园子里有几篇原创的Ext入门文章，看看也是有好处的。
   为了运行下面的例子，请下载ext2.0,实际上我的例子也是从form-grid等例子修改而来的。
   会员分组统计界面如下：

点击查看大图

数据维护界面如下：

点击查看大图

说明：做过C/S数据应用的程序员都明白，我们一般会定义数据源，然后再将其绑定到界面组件上。在EXT中，如果要测试界面组件是否正确，则用以下几行就能轻松搞定了：
var myData = [
   ['1','alex','lsj@21cn.com','13226612334',1995,'2007-10-20 10:00:00'],
   ['2','tom','tom@21cn.com','13826782334',1996,'2007-10-20 10:00:00'],
   ['3','cx8','cx@163.com', '139250802541',1999,'2008-11-12 08:00:00']
   ];
   var ds = new Ext.data.Store({
   reader: new Ext.data.ArrayReader({},[
   'id','Name','Email','Mobile',//通常的字符型可简单定义
   {name: 'GradYear', type: 'int'},
   {name: 'sCreatedDate', type: 'date', dateFormat: 'Y-m-d H:i:s'}
   ])
   });
   ds.loadData(myData);
要同时绑定到数据列表组件和编辑组件则可以如下办理：
var gridForm = new Ext.FormPanel({
   id: 'member-form',frame: true, labelAlign: 'left',
layout: 'column', // 以列方式布局
……
   items: [{
   columnWidth: 0.6,layout: 'fit',//左边列放列表
   items: {
   xtype: 'grid', ds: ds, cm: colModel, sm: rsm,id:'member-grid',
   title:'会员列表', border: true, stripeRows: true, frame: true, height: 450,
   ……
   }
   },{
   xtype: 'fieldset',columnWidth: 0.4,//右边列放编辑板
   ……,
   items: [
   {fieldLabel:'姓名',name: 'Name',allowBlank: false,minLength:3,maxLength:8,anchor:'90%'},
   {fieldLabel:'邮件',name: 'Email',vtype:'email',anchor:'90%'},
   {fieldLabel:'手机',name: 'Mobile',anchor:'90%'},
   {fieldLabel:'毕业年份',name: 'GradYear',xtype:'numberfield',anchor:'90%',value: '2008'},
   {fieldLabel:'登记日期',name: 'sCreatedDate', xtype:'datefield',format: 'Y-m-d H:i:s', anchor:'90%'}
   ],
……