ExtJs――FormPanel(完整示例、带悬浮提示、带验证)!!!

ExtJs――FormPanel(完整示例、带悬浮提示、带验证)!!!
2011年03月10日
　　程序员是活在自己想象的王国里。如果你的程序写得好，你就可以和电脑处好关系，就可以指挥电脑干你想干的事。这个时候你是十足的主宰。每每你坐在电脑面前，你就是在你的王国里巡行，这样的日子简直就是天堂般的日子！！！
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　Ext.onReady(function(){ //启动悬停提示 Ext.QuickTips.init(); //姓名 var txtName = new Ext.form.TextField({ name:'txtName', fieldLabel:'姓名', width:200, allowBlank:false, //不能为空 regex:/^\w{6,12}$/, //正则表达式 regexText:'温馨提示：只能为6-12位的字母、数字、下划线。' }); //密码 var txtPassword = new Ext.form.TextField({ name:'txtPassword', fieldLabel:'密码', inputType:'password', width:200, allowBlank:false, regex:/^\w{6,12}$/, regexText:'温馨提示：只能为6-12位的字母、数字、下划线。' }); //性别男 var rdaSexBoy = new Ext.form.Radio({ name:'rdaSex', inputValue:'男', //实际值 boxLabel:'男', //显示值 checked:true //默认男 }); //性别女 var rdaSexGril = new Ext.form.Radio({ name:'rdaSex', inputValue:'女', boxLabel:'女', width:150 }); //性别 分组 var grpSex = new Ext.form.RadioGroup({ name:'sex', fieldLabel:'性别', items:[rdaSexBoy,rdaSexGril], width:100 }); //出生日期 var dateBirthday = new Ext.form.DateField({ name:'dateBirthday', fieldLabel:'出生日期', width:200, format:'Y-m-d', varlue:new Date() }); //爱好 var chkHobby1 = new Ext.form.Checkbox({ name:'chkHobby', inputValue:'钓鱼', boxLabel:'钓鱼', checked:true }); var chkHobby2 = new Ext.form.Checkbox({ name:'chkHobby', inputValue:'上网', boxLabel:'上网' }); var chkHobby3 = new Ext.form.Checkbox({ name:'chkHobby', inputValue:'游泳', boxLabel:'游泳' }); var chkHobby4 = new Ext.form.Checkbox({ name:'chkHobby', inputValue:'看电视', boxLabel:'看电视' }); //爱好分组 var grpGobby = new Ext.form.CheckboxGroup({ name:'hobby', fieldLabel:'您的爱好', items:[chkHobby1,chkHobby2,chkHobby3,chkHobby4], width:300 }); //最高学历 var data = [ [1,'博士'], [2,'硕士'], [3,'研究生'], [4,'本科'], [5,'专科'], [6,'高中'], [7,'初中'] ]; var proxy = new Ext.data.MemoryProxy(data); var record = new Ext.data.Record.create([ {name:'id',type:'int',mapping:0}, {name:'name',type:'string',mapping:1} ]); var reader = new Ext.data.ArrayReader({},record); var store = new Ext.data.Store({ proxy:proxy, reader:reader, autoLoad:true //即时加载数据 }); //store.load(); //这样加载才能正常显示默认值 var chkEdu = new Ext.form.ComboBox({ name:'chkEdu', fieldLabel:'最高学历', store:store, mode:'local', triggerAction:'all', emptyText:'选择最高学历', displayField:'name', valueField:'id' //value:4 //缺省值 }); //最喜欢的数字 var numLove = new Ext.form.NumberField({ name:'numLove', fieldLabel:'最喜欢的数字' }); //家庭住址 var areaAddress = new Ext.form.TextArea({ name:'areaAddress', fieldLabel:'家庭住址', width:500, height:50 }); //上班时间 var timeWork = new Ext.form.TimeField({ name:'timeWork', fieldLabel:'上班时间', //increment:30, //时间间隔 format:'H:i' }); //个人简介 var htmlInfo = new Ext.form.HtmlEditor({ name:'htmlInfo', fieldLabel:'个人简介', //enableLabel:false, //enableSourceEdit:false, height:150 }); //照片 var txtPhoto = new Ext.form.TextField({ name:'txtPhoto', inputType:'file', fieldLabel:'照片', width:500 }); //提交按钮 var btnSubmit = new Ext.Button({ text:'提交', tooltip:'填写完毕就提交吧！', //悬停提示 tooltipType:'qtip', handler:function(){ form.getForm().submit({ success:function(form,action){ Ext.Msg.alert('提示','成功！'); /* form.items.each(function(field){ if(field.isFormField){ alert(field.getName() + '=' + field.getValue()); } }); */ }, failure:function(){ Ext.Msg.alert('提示','失败！'); } }); } }); //重置按钮 var btnReset = new Ext.Button({ text:'重置', tooltip:'填错了就重置吧！', //悬停提示 tooltipType:'qtip', handler:function(){ form.getForm().reset(); } }); //表单 var form = new Ext.form.FormPanel({ url:'FormServlet.do', method:'post', renderTo:Ext.getBody(), title:'新员工', baseParams:{name:'中华人民共和国',id:100}, //隐藏域 style:'padding:10px', frame:true, labelAlign:'right', width:650, autoHeight:true, items:[ txtName,txtPassword,grpSex,dateBirthday,grpGobby, chkEdu,numLove,areaAddress,timeWork,htmlInfo,txtPh oto ], buttons:[btnSubmit,btnReset] }); });