当前位置>>
<contact><!--对应record : '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>
运行本代码，有如下效果：
不容易啊，总算完成表单控件教程了:-)。
