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定义的回调函数中作相应的处理,比如下面的代码表示在表单处理成功后,弹出提示信息,代码如下:

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