form表单属性介绍

最新推荐文章于 2022-02-10 13:38:45 发布
原创最新推荐文章于 2022-02-10 13:38:45 发布 · 204 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#EXT #CSS #JavaScript #prototype #HTML #ViewUI
ExtJS 专栏收录该内容
29 篇文章
订阅专栏
<HTML>
<HEAD>
	<TITLE>使用EXT输出HelloWorld</TITLE>
	<!-- 导入extjs配置 … ... -->
	<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>
	<style type="text/css">
		.allow-float {clear:none!important;}
		.stop-float {clear:both!important;}
		.float-left {float:left;}
	</style>
	<script type="text/javascript">
		Ext.onReady(function(){
			Ext.BLANK_IMAGE_URL='./../ext/resources/images/default/s.gif';
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';
			var form = new Ext.form.FormPanel({
				title: '提示信息（qtip）',
				labelSeparator: ':',
				bodyStyle: 'padding:5 5 5 5',
				height: 500,
				width: 300,
				frame: true,
				labelWidth: 60,
				labelAlign: 'right',
				applyTo: 'form',
				items:[
				       	new Ext.form.TextField({
				       		fieldLabel: '姓名',
				       		id: 'userName',
				       		selectOnFocus: true,
				       		allowBlank: false,
				       		regex: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
				       		regexText: '用户名格式错误',
				       		blankText: '请填写用户名'
				       	}),
				       	new Ext.form.TextField({
				       		fieldLabel: '密码',
				       		allowBlank: false,
				       		blankText: '请填写密码',
				       		inputType: 'password'
				       	}),
				       	new Ext.form.TextArea({
				       		id: 'memo',
				       		width: 150,
				       		fieldLabel: '备注'
				       	}),
				       	new Ext.form.NumberField({
				       		fieldLabel: '整数',
				       		allowDecimals: false,	//不允许输入小数
				       		nanText: '请输入有效的整数', //无效数字提示
				       		allowNegative: false		//不允许输入负数
				       	}),
				    	new Ext.form.NumberField({
				       		fieldLabel: '小数',
				       		decimalPrecision: 2,	//精确到小数点后两位
				       		allowDecimals: true,	//允许输入小数
				       		nanText: '请输入有效的小数', //无效数字提示
				       		allowNegative: false		//不允许输入负数
				       	}),
				    	new Ext.form.NumberField({
				       		fieldLabel: '数字限制',
				       		baseChars: '12345' //输入数字范围
				       	}),
				       	new Ext.form.NumberField({
				       		fieldLabel: '数值限制',
				       		maxValue: 100,	//最大值
				       		minValue: 50,	//最小值
				       		minText: '小了',
				       		maxText: '大了'				       
				       	}),
				       	new Ext.form.Radio({
				       		name: 'sex',
				       		fieldLabel: '性别',
				       		boxLabel: '男'
				       	}),
				    	new Ext.form.Radio({
				       		name: 'sex',
				       		fieldLabel: '性别',
				       		boxLabel: '女'
				       	}),
				    	new Ext.form.Checkbox({
				       		name: 'swim',
				       		fieldLabel: '爱好',
				       		boxLabel: '游泳'
				       	}),
				       	new Ext.form.Checkbox({
				       		name: 'walk',
				       		fieldLabel: '爱好',
				       		boxLabel: '散步'
				       	}),
				       	new Ext.form.Radio({
				       		name: 'gender',
				       		itemCls: 'float-left',
				       		clearCls: 'allow-float',
				       		fieldLabel: '性别',
				       		boxLabel: '男'
				       	}),
				    	new Ext.form.Radio({
				       		name: 'gender',
				       		clearCls: 'stop-float',
				       		hideLabel: true,
				       		boxLabel: '女'
				       	}),
				    	new Ext.form.Checkbox({
				       		name: 'hob',
				     		itemCls: 'float-left',
				       		clearCls: 'allow-float',
				       		fieldLabel: '爱好',
				       		boxLabel: '游泳'
				       	}),
				       	new Ext.form.Checkbox({
				       		name: 'inter',
				       		clearCls: 'stop-float',
				       		hideLabel: true,
				       		boxLabel: '散步'
				       	}),
				       	new Ext.form.TriggerField({
				       		id: 'center',
				       		fieldLabel: '触发字段',
				       		hideTriggerClick: false,
				       		onTriggerClick : function(e){
				       			var center = form.findById("center");
				       			alert(center.getValue());
				       		}
				       	})
				       	
			
				       ],
				buttons:[{
					text: '确定',
					handler: showValue
				}]
			});
			function showValue(){
				var memo = form.findById("memo");
				alert(memo.getValue());
			}
		});
	</script>
</HEAD>
<body id="form">
</body>
</HTML>