form.html:
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><
html><
head><
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><
title>Form</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><
script type="text/javascript" src="js/form.js" ></script></
head><
body><
div id="form"></div></
body></
html>然后是form.js:
Ext.onReady(
function(){ Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget =
'side'; var form = new Ext.FormPanel({ title: 'Form',labelAlign:
'left',buttonAlign:
'center',renderTo:
'form',width:600,
frame:
true,items: [
{ xtype:'textfield',name:
'name',allowBlank:
false,fieldLabel:
'Name' },{ xtype:'textfield',inputType:
'password',name:
'password',fieldLabel:
'Password' },{ xtype:'numberfield',name:
'age',fieldLabel:
'Age' },{ xtype:'timefield',name:
'time',allowBlank:
false,fieldLabel:
'Current Time' },{ xtype:'textfield',name:
'name',vtype:
'url',fieldLabel:
'Personal Site' },{ xtype:'textfield',name:
'email',vtype:
'email',fieldLabel:
'E-mail' },{ xtype:'radio',fieldLabel:
'Sex',boxLabel:
'Male',name:
'sex',checked:
true,inputValue:
'male' },{ xtype:'radio',labelSeparator:
'',boxLabel:
'Female',name:
'sex',inputValue:
'female' },{ xtype:'datefield',fieldLabel:
'Birthday',format:
'Y-m-d',name:
'birthday' },{ xtype:'combo',store:
new Ext.data.SimpleStore({ fields:['returnValue', 'textValue'],data:[
[1,
'January'],[2,
'Febuary'],[3,
'March'],[4,
'April'],[5,
'May'],[6,
'June'],[7,
'July'],[8,
'August'],[9,
'September'],[10,
'October'],[11,
'November'],[12,
'December']]
}),valueField:
'returnValue',displayField:
'textValue',mode:
'local',forceSelection:
true,blankText:
'Please select a month',emptyText:
'Select a month',hiddenName:
'month',editable:
false,triggerAction:
'all',allowBlank:
false,fieldLabel:
'Month Selection',name:
'month' },{ xtype:'checkbox',fieldLabel:
'Character',boxLabel:
'Michael Scofield',name:
'character',inputValue:
'1' },{ xtype:'checkbox',labelSeparator:
'',boxLabel:
'Lincoln Burrows',name:
'character',inputValue:
'2' },{ xtype:'checkbox',labelSeparator:
'',boxLabel:
'T-bag',name:
'character',inputValue:
'3' },{ xtype:'checkbox',labelSeparator:
'',boxLabel:
'John Abruzzi',name:
'character',inputValue:
'4' },{ xtype:'checkbox',labelSeparator:
'',boxLabel:
'Westmoreland',name:
'character',inputValue:
'5' },{ xtype:'textarea',name:
'msg',width:200,
fieldLabel:
'Message' }],buttons:[
{ text:'Submit' },{ text:'Cancel',handler:
function(){ simpleForm.form.reset(); }}
] });}
);代码中开头两行的作用是设置出错信息的提示以及信息的出现位置，这里是出现在控件左边。提交按钮的动作暂时没有定义。Cancel按钮就是重置form的内容。
