Extjs4中的form使用一

来源：互联网发布：汨罗淘宝售后打包招聘编辑：程序博客网时间：2024/05/17 09:09

一个简单的登录表单：

Ext.onReady(function(){//modelExt.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类型  }    }]})});