<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext.FormPanel表单</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="formPanel.js"></script>
</head>
<body>
</body>
</html>
formPanel.js
/** * @author zms */ Ext.onReady(function(){ //Ext.MessageBox.alert("123","123"); //脚本验证时 的提示 Ext.QuickTips.init(); //支持tips提示 Ext.form.Field.prototype.msgTarget='under';//提示方式 qtip,title,under,side,id //添加自定义验证 Ext.apply(Ext.form.VTypes,{ password:function(val,field){//val指文本值,field指组件 if(field.confirmTo){//confirmTo为自定义的配置参数, var pwd = Ext.get(field.confirmTo); return (val == pwd.getValue()); } } }); var from = new Ext.FormPanel({ renderTo:Ext.getBody(), x:100,y:100, floating:true, frame:true,//圆角 autoWidth:true,autoHeight:true, title:"Ext.FormPanel", bodyStyle:"padding:5px 5px 0", //设置内容样式 defaults:{width:200,xtype:"textfield"}, items:[{//-- fieldLabel:"UserName", allowBlank:false, blankText:'UserName Must Be Not Empty' },{ fieldLabel:"PassWord", id:"pwd", inputType:'password', allowBlank:false, blankText:'UserName Must Be Not Empty' },{//确认密码 fieldLabel:"确认密码", inputType:'password', vtype:"password",//使用自定义验证 vtypeText:"确认密码不同", confirmTo:"pwd"//要比效的组件 confirmTo为自定义函数的自定义配置参数 },{//---表单字段组 xtype:'fieldset', title:'fieldset(表单字段组)应用实例', collapsible:true,//收缩 width:305, defaults:{width:150},//默认的宽度 defaultType:'textfield',//默认的类型 items:[{ fieldLabel:'爱好', //标题 value:'xuetu' //值 },{//combo选择项(简单) fieldLabel:'性别(comno)', xtype:"combo", store:['男','女','保密'], emptyText:'请选择性别' },{ fieldLabel:'日期选择项(datefield)', xtype:"datefield" }] },{//--可选的fieldset实例 checkboxToggle:true 呈现一个带checkbox的fieldset checkboxToggle:true, title:"显示或隐藏", xtype:'fieldset', width:305, html:'checkboxToggle:true' }] }); });