Extjs4中的form使用一

一个简单的登录表单：

Ext.onReady(function(){
	//model
	Ext.define("person",{
		extend:'Ext.data.Model',
		fields:[
			{name:'userName',type:'auto'},
			{name:'password',type:'auto'}
		]
	});
	var p = new person({userName:'张三',password:"123456"});
	
	var passTest = /[123]/i//定义正则格式

//扩展

//vType：数据验证
	Ext.apply(Ext.form.field.VTypes,{
		myPass :function(val,field){
			return passTest.test(val);
		},
		myPassText:"密码格式错误",
		myPassMask:/[123]/i//只能输入定义的东西
	});
	//创建表单
	var textForm = Ext.create("Ext.form.Panel",{
		title : "form中文本框实例",
		bodyStyle :'padding:5 5 5 5',//样式
		frame : true,
		height : 120,
		width : 300,
		id:'my_form',
		renderTo:'formDemo',//在什么地方显示（标签的id）
		defaultType:'textfield',
		defaults:{
			labelSeparator :": ",//分隔符
			labelWidth : 50,
			width : 200,
			allowBlank: false,
			msgTarget : 'side',//提示消息位置
			labelAlign:'left'
		},
		items:[{
			fieldLabel : "Name",
			name:'userName',
			id:'userName',
			selectOnFocus : true,//点击有焦点的时候选中全部
			regex:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,//正则表达式
			regexText:"请用邮箱来注册",
			grow:false//是否在这个表单字段规定长度内自动根据文字的内容进行伸缩
		},{
			fieldLabel : "Pass",
			name:'password',
			id:'password',
			inputType:'password',//密码输入看不见
			vtype:'myPass'
		}],
		buttons: [
		  {text:'登陆系统',handler:function(b){
		  	var formObj = Ext.getCmp("my_form");//表单id
		  	var basic = formObj.getForm();//得到表单
		  	var nameField = basic.findField("userName");//得到文本域
		  	var nameValue = nameField.getValue();//得到文本域的值
		  	alert(nameValue);
		  }},{
		  	text:'重置',handler:function(b){
			  	var formObj = Ext.getCmp("my_form");
			  	var basic = formObj.getForm();
			  	basic.reset();
		  	}
		  },{
		  	text:'装在数据',handler:function(b){
			  	var formObj = Ext.getCmp("my_form");
			  	var basic = formObj.getForm();
			  	basic.loadRecord(p);//p为model类型
		  	}		  	
		  }
		]		
	})
});