Ext服务器交互技术详解

　　Ext是一个非常好的Ajax框架，其华丽的外观表现确实令我们折服，然而一个应用始终离开不服务器端，因此在实现开发中我们需要对Ext与服务器端的交互技术有较为详细的了解，在开发中才能游刃有余地应用。本文对Ext应用中与服务器交互的常用方法作具体的介绍，本文的内容大部份来源于《ExtJS实用开发指南》。
　　总体来说，Ext与服务器端的交互应用可以归结为三种类型，包含表单FormPanel的处理(提交、加载)、控件交互及用户发起的Ajax请求等三种。
一、表单提交(submit)及加载(load)
　　这里说的表单是指用Ext的FormPanel建立的表单，看下面的例子：

Ext.onReady(function()...{
  var f=new Ext.form.FormPanel(...{
  renderTo:"hello",
  title:"用户信息录入框",
  height:200,
  width:300,
  labelWidth:60,
  labelAlign:"right",
  frame:true,
  defaults:...{xtype:"textfield",width:180},
  items:[
  ...{name:"username",fieldLabel:"姓名"},
  ...{name:"password",fieldLabel:"密码",inputType:"password"},
  ...{name:"email",fieldLabel:"电子邮件"},
  ...{xtype:"textarea",name:"intro",fieldLabel:"简介"}
  ],
  buttons:[...{text:"提交"},...{text:"取消"}]  
 })
 });

要提交该表单，则可以直接调用FormPanel下面form对象的submit方法即可，代码如下：

f.form.submit(...{
     url:"server.js",
waitTitle:"请稍候",
     waitMsg:"正在提交表单数据，请稍候。。。。。。"
     });

　　调用submit方法后，默认情况下服务器端应用程序需要返回一个JSON数据对象，该对象包含两个属性，success的值是布尔值true或false，如果success的值为true，则表示服务器端处理成功，否则表示失败；而errors的值是一个对象，对象中的每一个属性表示错误的字段名称，而属性值为错误描述。
　　比如，如果我们有服务器端验证，下面的返回结果表示当表单提交处理出错时给客户端返回的数据。
server.js文件中的内容如下：

...{
    success: false,
    errors: ...{
        username: "姓名不能为空",
        times: "迟到次数必须为数字!"
    }
}

结果如图所示：

 
　　当然，如果success属性值改为true，则表示服务器端的处理成功，此时可以在success定义的回调函数中作相应的处理，比如下面的代码表示在表单处理成功后，弹出提示信息，代码如下：

f.form.submit(...{
     waitTitle:"请稍候",
     waitMsg:"正在提交表单数据，请稍候。。。。。。",
     url:" server.js",
     method:"POST",
     success:function(action,form)
     ...{
      alert("提交成功!");
     })
 
　　另外一种表单动作是表单中数据的加载。要给表单中的字段设置值，可以通过调用字段的setValue方法，也可以直接在初始化字段的时候在配置参数中设置value属性值，另外还有一种方法是通过Ajax的方式从服务器端加载表单中各个字段的值。这种方式也就是我们这里要介绍的表单数据加载。
　　ExtJS的表单数据加载通过BasicForm的load方法来进行，表单数据加载动作由类Ext.form.Action.Load定义，执行数据加载动作会到服务器端加载数据，默认情况下服务器端需要返回一个包含success属性及data属性的JSON对象，内容大致如下：

...{
    success: true,
    data: ...{
        username: "冷雨",
        times: 1
    }
}

下面我们看一个使用到表单数据加载的简单示例代码：

Ext.QuickTips.init();
Ext.onReady(function()...{ 
 var f=new Ext.form.FormPanel(...{
  renderTo:"hello",
  title:"用户信息录入框",
  height:130,
  width:320,
  labelWidth:60,
  labelAlign:"right",
  frame:true,
  defaults:...{width:180,xtype:"textfield"},
  items:[...{
   xtype:"textfield",
   name:"username",
   fieldLabel:"姓名"
   },
   ...{
   xtype:"textfield",
   name:"times",
   fieldLabel:"登录次数"
   }
  ],
  buttons:[...{text:"加载表单数据",
    handler:s}]   
 }); 
 function s()
 ...{
 f.form.load(...{
     waitTitle:"请稍候",
     waitMsg:"正在加载表单数据，请稍候。。。。。。",
     url:"data.js",
     success:function(action,form)
     ...{
      alert("加载成功!");
     },
     failure:function(action,form)
     ...{
      alert("数据加载失败！");
     }
     }); 
 }
 
 });

服务器data.js中的内容为：