<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'form.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/css/main.css" />
<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var simpleForm = new Ext.FormPanel({
renderTo:'a',
labelAlign: 'left',
title: '表單例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [{
layout:'column', //定義該元素為布局為列布局方式
border:false,
labelSeparator:'：',
items:[{
columnWidth:0.3, //該列占用的寬度，標識為50％
layout: 'form',
border:false,
items: [{ //這里可以為多個Item，表現出來是該列的多行
cls : 'key',
xtype:'textfield',
fieldLabel: '用戶名',
name: 'name',
anchor:'90%'
}]
},{
columnWidth:0.3,
layout: 'form',
border:false,
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
},{
columnWidth:0.3,
layout: 'form',
border:false,
items: [{
cls : 'key',
xtype:'textfield',
inputType:'password',
fieldLabel: '口令',
name: 'passwd',
anchor:'90%'
}]
}]
}]
});
var form2 = new Ext.FormPanel({
labelAlign: 'left',
renderTo:'b',
title: '表單例子',
buttonAlign:'right',
bodyStyle:'padding:5px',
width: 600,
frame:true,
labelWidth:80,
items: [
/** 第一行 */
{
layout:'column',
border:false,
labelSeparator:'：',
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: '姓名',
name: 'name',
anchor:'90%'
}]
},{
columnWidth:.25,
layout: 'form',
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '性別',
boxLabel:'男',
name: 'sex',
checked:true,
inputValue:'男',
anchor:'95%'
}]},{
columnWidth:.25,
layout: 'form',
labelWidth:0,
labelSeparator:'',
hideLabels:true,
border:false,
items: [{
style:'margin-top:5px',
xtype:'radio',
fieldLabel: '',
boxLabel:'女',
name: 'sex',
inputValue:'女',
anchor:'95%'
}]}
]},
/** 第二行 */
{
layout:'column',
border:false,
labelSeparator:'：',
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'datefield',
fieldLabel: '出生日期',
name: 'birthday',
anchor:'90%'
}]},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'combo',
store: new Ext.data.SimpleStore({
fields: ["retrunValue", "displayText"],
data: [[1,'小學'],[2,'初中'],[3,'高中'],[4,'中專'],[5,'大專'],[6,'大學']]
}),
valueField :"retrunValue",
displayField: "displayText",
mode: 'local',
forceSelection: true,
blankText:'請選擇學歷',
emptyText:'選擇學歷',
hiddenName:'education',
editable: false,
triggerAction: 'all',
allowBlank:false,
fieldLabel: '學歷',
name: 'education',
anchor:'90%'
}]}
]}
],
buttons: []
});
});
</script>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
</body>
</html>