Ext.FormPanel表单(范例) _Web前端

Ext.FormPanel表单(实例)

<!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'
		}]
	});
});