异步加载的表单

来源：互联网发布：淘宝排查实际控制人编辑：程序博客网时间：2024/04/29 03:12

ext在表单处理方面的能力十分优秀，在实际应用中，我们经常遇到数据修改的应用，因此，我们利用ext的表单加载做出极具用户体验的表单，简单演示下，先看下xml数据代码：

<response success="true">
<contact>
<name>leehui1983</name>
<email>nicho-li@163.com </email>
</contact>
</response>

在看下js代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>new doucment</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
</head>

<body>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();//开启表单提示
Ext.form.Field.prototype.msgTarget = *side*;//设置提示信息位置为边上
var simple = new Ext.FormPanel({//初始化表单面板
labelWidth: 75, // 默认标签宽度
buttonAlign: *left*,//按钮左对齐
frame:true,//设置表单面板，false为无面板
title: *我的表单*,
bodyStyle:*padding:5px 5px 0*,
width: 350,
defaults: {width: 230},
waitMsgTarget: true,//加载提示
defaultType: *textfield*,//默认字段类型
reader : new Ext.data.XmlReader({//设置数据来源为xml
record : *contact*,//xml数据dom节点
success: *@success*//加载成功后不做处理
}, [
*name*,*email*//取得xml节点数据填充到表单对应字段
]),

items: [{
fieldLabel: *帐户*,
name: *name*
},{
fieldLabel: *e-mail*,
name: *email*
}
],

buttons: [{
text: *加载*,
handler:function(){
simple.form.load({url:*form_info.xml*, waitMsg:*Loading*});//加载xml数据文件
}
}]
});

simple.render(*show*);//填充到指定区域
});
</script>
<div id="show"></div>
</body>
</html>

运行本代码，有如下效果：

http://www.myext.cn/Article/813.html