Ext服务器交互技术详解

间隙填充
正睿科技  发布时间:2008-04-02 09:50:25  浏览数:11356

  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中的内容为: