在上篇原型介绍中，有朋友就问了是否是组件，我想他可能的意思是能否在IDE的工具箱有可以拖拉使用的组件。暂时我也没有找到好的。Hafeyang 介绍了一个工具http://code.google.com/p/extsharp/ 可以省点脑力。据说Spket是个非常优秀的javascript开发工具，可以支持ext2.0,我没有用过，所以就没有发言权了，有兴趣可以自己研究。不过我还是建议大伙先弄明白最基本的原理，再使用工具，否则很容易变成大公司手中的木偶:-(
    在C/S世界里，编写数据库应用通常分客户端和服务后台，中间通常使用WebService通讯，其根本实际上是一个XML数据包，有些公司为了提升性能，编写了原生的socket通讯程序来传送数据包，高级一点的自己做了负载均衡。这样性能有了，安全也有了，但是无法"Open"!世界就是这样的，没有什么东西十全十美！而在Ext的世界中，推荐大家使用JSON数据串来传递数据，比较开放，性能也说得过去(应该比XML省一半容量)，算是一个比较好得折中办法。
    你可以下载showme项目来感受一下数据应用开发，下面简要说明要点如下：
1) 数据源设定
   我们要从数据后台取得服务，就必须指明提供数据的url,如果让前端js直接操作后台数据库，一定造成很难维护的困难局面，做后台NBear,LINQ都不错的，学习起来也很容易。

function createDataStore(meta){
  var DEFAULT_PAGE_SIZE=10;
  var ds = new Ext.data.Store({
    proxy: new Ext.data.ScriptTagProxy({url: 'facade.aspx'}),
    reader: new Ext.data.JsonReader({
      root: 'data',
      totalProperty: 'totalCount',
      id: 'id',
      fields:meta}),
      remoteSort: false,
      baseParams: {start:0,limit:DEFAULT_PAGE_SIZE,s_method:'list'}
    });
  return ds;
}

在实际项目中绝对不允许一次查询返回全部数据的，必须分页查看。(任何好的框架总有愚蠢的用法，反过来还说是框架性能太差，真无言以对！)，所以数据包中要定义符合你查询条件的总记录数，还有数据结果集合，当然请求者已经知道是从何处开始查询，每页记录数目。
  
2) ajax发送数据包
    以保存修改后的数据为例，新增和删除同理。

function saveData() {
  for(var i=0;i<ds.getCount();i++){
    var r=ds.getAt(i);
    if(r['id']==''||r.dirty){
       var dd=Ext.encode(r.data);
       // Ext.log(dd);//可用于调试
       Ext.Ajax.request({
         url: 'facade.aspx',
         params: { s_method: 'save',id:r.data['id'],data:dd },
         failure: function(){Ext.Msg.alert("error");}
       });
     }
   }
   ds.reload();
 }

3) 集成门面处理概要
    为了说明原理，我直接在facade.aspx中用C#说明：

 protected override void OnLoad(EventArgs e) {
        Response.ContentEncoding = Encoding.UTF8;
        String rt = "";// = service.Execute(Request.Params);
        String method = Request.Params["s_method"];
        bool ok = true;
        if ("list".Equals(method)) {
            String sql = "1=1";
            String s1 = Request.Params["start"];
            String s2 = Request.Params["limit"];
            int start = 0;
            int pagesize = 10;
            if (s1 != null && s1.Length > 0)
                start = int.Parse(s1);
            if (s2 != null && s2.Length > 0)
                pagesize = int.Parse(s2);
            String q = Request.Params["query"];
            if (q != null) {
                // todo 修改sql，例如：
                //sql = "Name like '%" + q + "%'";
            }
            //str = service.loadJsonRecords(sql, start, pagesize);
            rt = "{\"totalCount\":\"50\",\"data\":[{\"Name\":\"alex\",\"Email\":\"lsj_3@21cn.com\",\"Mobile\":\"13922666727\",\"GradYear\":1995,\"sCreatedDate\":\"2008-01-02 21:06:28\",\"id\":\"1\"},{\"Name\":\"tom\",\"Mobile\":\"13922666739\",\"GradYear\":2009,\"id\":\"2\",\"sCreatedDate\":\"2008-01-02 21:06:28\"},{\"Name\":\"jerry\",\"Mobile\":\"13922666749\",\"GradYear\":2009,\"id\":\"3\",\"sCreatedDate\":\"2008-01-02 21:06:28\"}]}";
        }
        else if ("delete".Equals(method)) {

     }

}

    这里我直接输入了一串已经准备好的数据，读者可以用自己熟悉的框架改造为直接和数据库查询。下篇我介绍llano如何做到这一点。
    有了数据包，当然就是把结果送回客户端，如果有回调要求，则生成的是客户端js的入口函数名和数据，这样就可以异步更新前端了。

  bool scriptTag = false;
        String cb = Request.Params["callback"];

        if (cb != null) {
            scriptTag = true;
            Response.ContentType = "text/javascript";
        }
        else {

            Response.ContentType = "application/x-json";
        }
        if (scriptTag)
            rt = cb + "(" + rt + ")";
        Response.Write(rt);
        Response.End();

   细心的读者一定会发现我们有多处重复进行了硬编码：

 var colModel = new Ext.grid.ColumnModel([
        {header: "姓名", width: 60, sortable: true,  dataIndex: 'Name'},
        {header: "邮件", width: 175, sortable: true,  dataIndex: 'Email'},
        {header: "手机", width: 125, sortable: true, dataIndex: 'Mobile'},
        {header: "毕业年份", width: 65, sortable: true, renderer: myRenderer, dataIndex: 'GradYear'},
        {header: "登记日期", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d'), dataIndex: 'sCreatedDate'}
      ]);

..

  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', anchor:'90%'}
         ]

   那我们就在下一篇文章中看看如何重构，使得程序灵活一些，毕竟真正的项目通常一个表就30个左右的字段，我们大家可不想变成打字工人:-)
alex 1-3