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

    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']
      ];

要同时绑定到数据列表组件和编辑组件则可以如下办理：

接下来我们要进行事件处理：

  1) 列表当前选择记录和编辑框同步：
   

2) 新增记录到缓存：

 }

3) 从缓存中删除一条记录：

 }

要个性化显示也很简单，比如我们把1998年前毕业的用红色，否则用绿色标记：

  }

var colModel = new Ext.grid.ColumnModel([
      ……,

    我们从使用中看出Ext设计十分灵活，让我有当初使用Delphi的那种爽的感觉！Ext的数据模型还是比较简单易懂的，基本可以应付常见的应用，我们也看到对于新增加的记录，它还缺乏一些状态，就不如.NET框架中DataSet中那么强有力。可能是要考虑不能太过于复杂，否则js框架就太大了,毕竟是要下载到客户端去的。但是我们仍然可以想一些办法区分，比如：r.data['id']=''；这样我们在后台就可以知道这是新增加的记录。
    再看看统计则要用扩展的分组统计组件。定义数据源稍微有些变化，多了几点：

 

OK，有点感觉了吗？最好下载demo实际运行一下，请把例子解压到ext2.0/examples/demo目录,运行那form.html以及group.html即可

聪明的读者肯定就要问，那如何实际从数据库中加载数据并且提交修改数据回数据库呢？那就请听下回分解吧。

Alex