ExtJS 4 表单元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单及表单控件详解</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/bootstrap.js"></script>
<script type="text/javascript" src="ext/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext.require([
		'Ext.button.*',//按钮类
		'Ext.form.*',//表单类
		'Ext.MessageBox.*'//提示框类
	]);//预加载所需要的模块,好处是不用等那重达1M的加载完
	
	//初始化信息提示功能
	Ext.QuickTips.init();
	
	var MyForm = Ext.create('Ext.form.Panel',{
		title:'表单',//表单标题
		height:120,//表单高度
		width:200,//表单宽度
		border:1,//边框
		frame:true,//是否渲染表单,如果为true,则border属性设置无效
		bodyStyle:{//设置表单主题样式
			padding:'5px'//内间距
		},
		defaults:{//统一设置表单字段默认属性
			//autoFitErrors:false,//展示错误信息时是否自动调整字段组件宽度
			labelSeparator:':',//分隔符
			labelWidth:50,//标签宽度
			width:150,//字段宽度
			allowBlank:false,//是否允许为空
			balnkText:'不允许为空',//为空时候的提示
			labelAlign:'left',//标签对齐方式
			msgTarget:'qtip'//显示一个浮动的提示信息
			/*
			msgTarget:'title'	//显示一个浏览器原始的浮动提示信息
			msgTarget:'under'	//在字段下方显示一个提示信息	
			msgTarget:'side'	//在字段的右边显示一个提示信息
			msgTarget:'none'	//不显示提示信息
			msgTarget:'errorMsg'	//在erorMsg元素内显示提示信息
			*/
		},
		items:[
			{
				xtype:'textfield',
				fieldLabel:'姓名'
			},
			{
				xtype:'numberfield',
				fieldLabel:'年龄'
			}
		]
	});
	
	
	//表单的布局
	var fwdz = Ext.create('Ext.form.field.Text',{
		fieldLabel:'房屋地址<span class=\"colorRed\">*</span>',
		name:'fwdz',
		anchor:'100%',
		allowBlank:false,
		blankText:'房屋地址不能为空'
	});
	
	var zh = Ext.create('Ext.form.field.Number',{
		fieldLabel:'幢号<span class=\"colorRed\">*</span>',
		name:'zh',
		anchor:'96%',
		value:'1',
		maxValue:9999,
		minValue:1,
		allowBlank:false
	});
	
	var cqzh = Ext.create('Ext.form.field.Text',{
		fieldLabel:'产权证号<span class=\"colorRed\">*</span>',
		name:'cqzh',
		anchor:'100%',
		allowBlank:false
	});
	
	var states_fwjg = Ext.create('Ext.data.Store',{
		fields:['key','name'],
		data:[
			{key:'0',name:'钢筋混凝土'},
			{key:'1',name:'砖木'},
			{key:'2',name:'其他结构'}
		]
	});
	
	var fwjg = Ext.create('Ext.form.ComboBox',{
		name:'fwjg',
		fieldLabel:'房屋结构<span class=\"colorRed\">*</span>',
		store:states_fwjg,
		querymode:'local',
		displayField:'name',
		valueField:'key',
		value:'0',
		anchor:'96%',
		allowBlank:false
	});
	
	
	var gjfsj = Ext.create('Ext.form.field.Date',{
		name:'gjfsj',
		fieldLabel:'购建房时间<span class=\"colorRed\">*</span>',
		anchor:'100%',
		format:'Y-m-d',
		allowBlank:false
	});
	
	
	var container = Ext.create('Ext.container.Container',{
		anchor:'100%',
		layout:'column',
		items:[
			{
				xtype:'container',
				columnWidth:.5,
				layout:'anchor',
				items:[zh,fwjg]
			},
			{
				xtype:'container',
				columnWidth:.5,
				layout:'anchor',
				items:[cqzh,gjfsj]
			}
		]
	});
	
	
	var bz = Ext.create('Ext.form.field.TextArea',{
		name:'bz',
		grow:true,
		fieldLabel:'备注',
		anchor:'100%'
	});
	
	var mainForm = Ext.create('Ext.form.Panel',{
		name:'biaodan',
		bodyStyle:{
			background:'#DFE9F6',
			padding:'5px',
			border:0
		},
		fieldDefauls:{
			labelAlign:'left',
			msgTarget:'side'
		},
		items:[fwdz,container,bz],
		buttons:[
			{
				text:'保存',
				handler:function(){
					Ext.Msg.alert('保存','表单提交');
					alert(mainForm.getForm().getValues(true));
				}
			},
			{
				text:'取消',
				handler:function(){
					Ext.Msg.alert('取消','取消按钮');
				}
			}
		]
	});
	
	
	Ext.onReady(function(){
		//MyForm.render(Ext.getBody());
		//mainForm.render(Ext.getBody());
		Ext.QuickTips.init();
		var loginForm = Ext.create('Ext.form.Panel',{
			title:'Ext.form.field.Text示例',
			bodyStyle:'padding:5 5 5 5',
			frame:true,
			height:150,
			width:300,
			renderTo:Ext.getBody(),
			items:[
				{
					fieldLabel:'用户名',
					name:'userName',
					xtype:'textfield',
					selectOnFocus:true,//得到焦点时自动选择文本
					regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
					regexText:'格式错误'
				},
				{
					name:'password',
					xtype:'textfield',
					fieldLabel:'密码',
					inputType:'password'
				},
				{
					name:'name',
					xtype:'textfield',
					fieldLabel:'姓名',
					allowBlank:false,
					blankText:'姓名不能为空'
				}
			],
			buttons:[
				{
					text:'登录',
					handler:function(){
						loginForm.form.setValues({userName:'user@com.cn',password:'123456',name:'aaa'});
					}
				}
			]
		});
	});
	
	
</script>
</head>

<body>
</body>
</html>

知识共享许可协议
《ExtJS 4 表单元素》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
相邻依据:发表时间
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     173.62ms