<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单初始化</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
<script type="text/javascript">
Ext.onReady(function(){
var f = new Ext.form.FormPanel(
{
title:"表单初始化",
url:"",
method:"post",
frame:true,
width:300,
autoHeight:true,
renderTo:"f",
labelAlign:"right",
labelWidth:65,
defaultType:"textfield",
items:[
{
xtype:"textfield",
name:"username",
fieldLabel:"用户名",
width:200
},
{
xtype:"textfield",
inputType:"password",
name:"password",
fieldLabel:"密码",
width:200
},
{
xtype:"datefield",
name:"birthday",
fieldLabel:"出生日期",
format:"Y-m-d",
width:150
},
{
xtype:"radiogroup",
name:"sex",
fieldLabel:"性别",
width:100,
items:[
{
xtype:"radio",
name:"sex",
boxLabel:"男",
inputValue:"男"
},
{
xtype:"radio",
name:"sex",
boxLabel:"女",
inputValue:"女"
}
]
}
],
buttonAlign:"center",
buttons:[
{
text:"提交"
},
{
text:"本地读取",
handler:function(){
// 初始化表单数据。
var json = {
username:"test",
password:"123",
birthday:"1987-03-06",
sex:"男"
};
f.getForm().setValues(json);
}
},
{
text:"远程读取",
handler:function(){
var reader = new Ext.data.JsonReader({},[
{
name:"username",
type:"string",
mapping:"username"
},
{
name:"password",
type:"string",
mapping:"password"
},
{
name:"birthday",
type:"string",
mapping:"birthday"
},
{
name:"sex",//表单组件的名字
type:"string",
mapping:"sex"//json数据的key
}]);
f.getForm().reader = reader;//映射关系
f.load({url:"initForm!getInitData.action"});//从哪儿获取数据
}
}
]
}
);
});
</script>
</head>
<body>
<div id="f" align="center"></div>
</body>
</html>
ext--表单初始化
最新推荐文章于 2024-01-16 10:33:05 发布