extjs表单
Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif'; Ext.QuickTips.init();//显示错误提示字符做准备 //准备下拉框的数据 var mydata = new Ext.data.SimpleStore({ fields:['id','myda'], //指定数组中数据格式 data:[['1','语文'],['2','数学'],['3','物理']] }); var mydata2 = new Ext.data.SimpleStore({ fields:['id','myda'], data:[ ['0','zhangsan'], ['1','lisi'], ['2','wangwu'], ['3','zhaoliu'] ] }); var myForm = new Ext.form.FormPanel({ url:'1.html', //表单提交地址 renderTo:Ext.get("id1"), //显示位置 //renderTo:document.body, frame:true, //自定义边框 title:"表单", width:300, items:[ { xtype:'textfield', fieldLabel:'用户名', width:150, allowBlank:false,//非空校验 name:'username', //添加事件 listeners:{ specialkey:function(f,e){ if(e.getKey() == e.ENTER) { Ext.Msg.alert("提交","太极"); myForm.getForm().submit(); } } } }, { xtype:'textfield', fieldLabel:'邮箱', width:150, vtype:'email',//vtype是提供的内部校验 name:'email' }, { xtype:'datefield', fieldLabel:'日期', width:150, disabledDays:[1,2,3,4,5],//禁止输入星期一到星期五,0代表星期天 name:'bay' }, { xtype:'textfield', fieldLabel:'测试一', width:150, vtype:'name', name:'text1' }, //单选框 { xtype:'radio', fieldLabel:'性别', name:'sex', boxLabel:'男' }, { xtype:'radio', hideLabel:false, name:'sex', boxLabel:'女', labelSeparator:'' }, //复选框 { xtype:'checkbox', fieldLabel:'爱好', name:'hate', boxLabel:'唱歌' }, { xtype:'checkbox', hideLabel:false, name:'hate', boxLabel:'跳舞', labelSeparator:'' }, { xtype:'checkbox', hideLabel:false, //只显示在右侧 name:'hate', boxLabel:'爬山', labelSeparator:'' }, //下拉框 { xtype:'combo', name:'class', fieldLabel:'科目', mode:'local', //数据来自本地还是远程 store:mydata,//数据来源 displayField:'myda',//显示内容 width:150 }, //文本框 { xtype:'textarea', name:'des', hideLabel:true, //左右都显示 labelSeparator:'', height:100, anchor:'100%' //全屏显示 }, //编辑框 { xtype:'htmleditor', name:'des', hideLabel:true, labelSeparator:'', height:100, anchor:'100%' }, { xtype:'combo', name:'name', fieldLabel:'姓名', mode:'local', store:mydata2, displayField:'myda', width:130, listeners:{ select:function(f,r,i) { //选中id==1时 if(i == 1 ){ Ext.Msg.prompt('提示','姓名',Ext.emptyFn()); } }, expand:function(f,r,i) { Ext.Msg.alert('提示','你展开了下拉框'); } } } ], //提交表单 buttons:[ { text:'提交', handler:function(){ myForm.getForm().submit({ success:function(f,a){//f为表单对象,a为action对象 Ext.Msg.alert('提示','提交成功'); }, failure:function(f,a) { //Ext.Msg.alert('提示','提交失败'); if(a.failureType == Ext.form.Action.CONNECT_FAILURE){ Ext.Msg.alert('提示','a=' + a.response.status +'a='+a.response.statusText); } if(a.failureType == Ext.form.Action.SERVER_INVALID) { Ext.Msg.alert('提示',a.result.errormsg); } } }); } }, { text:'重置', handler:function(){ myForm.getForm().reset(); } } ] }); //自定义校验,/^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/ Ext.form.VTypes['nameVal'] = /^[A-Z][A-Za-z\-]+[A-Z][A-Za-z\-]+$/; //校验所需要的正则表达式 Ext.form.VTypes['nameMask'] = /^[A-Z][A-Za-z\-]$/; //掩码,首字母没大写就显示错误 Ext.form.VTypes['nameText'] = 'In‐valid Director Name.'; //错误提示内容 Ext.form.VTypes['name'] = function(v){ return Ext.form.VTypes['nameVal'].test(v); } });