ExtJs学习资料17Ext.form.FormPanel表单对象操作说明.doc

1、引入ExtJs框架文件（存入Global.js文件中）document.write( );document.write();document.write();document.write();2、引入Global.js文件.iconbackground:url(icon.gif) 0 4px no-repeat !important3、效果图=4、JS源代码Ext.onReady(function()/-开始-Ext.QuickTips.init(); /初始化提示信息实例Value Description- -qtip 当鼠标从输入栏移过时显示一个quick tiptitle 显示一个默认的浏览器弹出标题属性under 在输入栏下显示一个块状div,包含出错文本side 在输入栏右侧显示一个突出的出错图标element id 直接在指定元素的innerHTML中加入出错文本-Ext.form.Ftotype.msgTarget=side;/=正则表达式自定义=Ext.form.VTypesjackVal=/u4E00-u9FA5+$/; /允许输入/Ext.form.VTypesjackMask=/A-Za-z+$/; /输入指定的字符,除此之外不响应Ext.form.VTypesjackText=只能输汉字; /提示信息Ext.form.VTypesjack=function(v) /检测函数return Ext.form.VTypesjackVal.test(v);/=附加正则表达式自定义=Ext.applyIf(Ext.form.VTypes,telphone:function(_v)return /(d3-d7,8$)|(d4-d7,8$)|(d3d7,8$)|(d4d7,8$)|(d7,8$)/.test(_v);,telphoneText:请输入合法的电话号码,telphoneMask:/0-9-/i,mobile:function(_v)return /11-90-9d8$/.test(_v);,mobileText:请输入合法手机号码,mobileMask:/0-9/i);/=定义简单数据源=var myStore=new Ext.data.SimpleStore(fields:txtValue,txtName,data:1,喜剧,2,悲剧,3,动作);/=定义动态数据源(从服务器端获取数据)=var dynamicStore=new Ext.data.Store(/*服务器端返回信息格式:*/DataReader对象,它处理数据对象并返回Ext.data.Record对象数组,Ext.data.Record使用它的id作为键值被缓存reader:new Ext.data.JsonReader(fields:txtValue,txtName,root:rows),/如果传入此值,store将在被创建后使用autoLoad对象作为参数自动调用load方法autoLoad:true,/Proxy对象,提供访问数据对象的方法proxy:new Ext.data.HttpProxy( url:getJsonData.asp );/dynamicStore.load(); /使用配置的Reader从Proxy中加载Record缓存/=var movie_form;if(!movie_form)movie_form=new Ext.form.FormPanel(id:myForm, /组件唯一的id(默认值为一个自动生成的id)title:电影信息表单, /panel头部显示的标题文字(默认值为 )/autoWidth:true, /宽度充满整个文档的宽度width:460,/表单的宽度autoHeight:true,/表单自适应高度/height:400,/表单的高度/ frame:如果为true,panel具有全部阴影(指在panel的整个body区域全部填充背景),/否则只在四周渲染一个1像素的边框(默认值为false) frame:true, iconCls:icon, /提供一个被用作header图标的背景图片(默认值为 )/ monitorValid:如果为true,form监控自己的客户端校验状态,并使用校验状态循环触发事件./如果需要在按钮上使用配置值formBind:true,将按钮绑定到表单的校验状态,那么该项必须为truemonitorValid:true,labelWidth:80,labelAlign:right,/ collapsible:如果为true，panel是可收缩的，并且有一个收起/展开按钮自动被渲染到它的头部工具区域， /否则panel的大小是固定的，没有按钮(默认值为 false)。 /collapsible:true,/ titleCollapse:如果为true,当点击顶部工具栏上的任何位置时允许panel收缩/展开(当collapsible=true),/ 如果为false,只有在点击工具按钮时才会收缩/展开(默认值为 false)/titleCollapse:true,items:xtype:textfield, /组件类型id:movieName, name:movieName, fieldLabel:电影名称, allowBlank:false, emptyText:请输入电影名称/*,listeners: /侦听是否按下了回车键specialkey:function(thisField,eventObj)/参数: 当前组件对象,键盘事件对象/当一个与导航相关的键(箭头,tab键,enter键,esc键,等等)被按下时触发if(eventObj.getKey()=eventObj.ENTER) alert(你按下了回车键!);/movie_form.getForm().submit(); /movie_form.getForm()得到数据面板BasicForm对象*/,xtype:textfield, id:director, name:director, fieldLabel:导演, emptyText:请输入该影片的导演,allowBlank:false, /vtype:alpha,/调用ExtJs内置的验证类型vtype:jack /调用自定义验证类型,xtype:textfield, id:telphone, name:telphone, fieldLabel:联系电话, /vtype:telphone,vtype:mobile, width:200, allowBlank:false,xtype:datefield, id:playDate, name:playDate, fieldLabel:放映日期,format:Y-m-d, /日期格式化readOnly:true, /设置只读value:new Date(), /默认值allowBlank:false /不允许为空/disabledDays:1,2,3,4,5 /除周六周日外全部禁用,xtype:radio, id:movieColor1, name:movieColor, fieldLabel:影片色彩,boxLabel:彩色, inputValue:cai, /提交到数据表中的值checked:true,xtype:radio, id:movieColor2, name:movieColor, labelSeparator:,boxLabel:黑白, inputValue:wb,xtype:checkbox, id:movieQuality, name:movieQuality, fieldLabel:电影质量,inputValue:cha, /提交到数据表中的值boxLabel:差,xtype:combo,id:movieTypes,/ComboBox的id属性和name属性不能相同name:movieType, fieldLabel:电影类型, mode:local, /store:myStore,store:dynamicStore, /数据源valueField:txtValue, /绑定到当前ComboBox的底层数据值的名称hiddenName:movieType, /提交到数据表中的值,真正提交时此combo的name,请一定要注意displayField:txtName, /列表框前台显示的值triggerAction:all, /触发加载所有数据,默认为query / forceSelection:如果为true,将限制选择的值必须是下拉列表中的值。/如果为false,允许用户设置任意值到输入栏(默认值为false) forceSelection:true, / selectOnFocus:设置为true,当获得焦点时立即选中输入栏中存在的所有文本/只有当editable=true时才有效(默认值为false)selectOnFocus:false, editable:true, /设置为false以阻止用户直接向该输入项输入文本,就像一个传统的select(默认值为true)emptyText:请选择, readOnly:true,/设置只读/ typeAhead:设置为true,当开始输入字符时,在指定的延迟之后会自动匹配剩下的内容,/如果找到了匹配的内容则自动选中它(typeAheadDelay(默认值为 false)typeAhead:true,allowBlank:false, blankText: 请选择电影类型, /typeAheadDelay:10, /pageSize:2,anchor:80%,listeners:select:function(thisCombo,thisRecord,comboIndex)/参数:当前组件对象,对象里的记录集,对应的索引/alert(comboIndex); /获取列表中对应的索引值(从0开始)/alert(thisC); /获取列表name的变量名/alert(thisRecord.get(txtValue); /获取选中的下拉列表对应的值,xtype:textarea, id:comment, name:comment, fieldLabel:电影评介,emptyText:请输入对此电影的评价, height:60,/grow:true, /growMin:60, /当grow=true时所允许的最小高度(默认值为 60)anchor:98%,xtype:htmleditor, enableColors: false, /启用回退/高亮颜色按钮(默认值为 true) enableAlignments: false, /启用左对其、居中、右对齐按钮(默认值为 true)enableFont:true, /启用字体选择。Safari下不可用。(默认值为 true) enableFontSize:true, /启用增加/减少字体大小按钮(默认值为 true) enableLinks:false, /启用创建链接按钮。 Safari下不可用。(默认值为 true)enableSourceEdit:false, /启用到源码编辑状体的切换按钮。Safari下不可用。(默认值为 true) id:introductions, /组件唯一的id(默认值为一个自动生成的id)name:introductions, /该表单域的HTML name 属性值fieldLabel:电影介绍, height:140, /autoHeight:true,anchor:98%,/renderTo:Ext.getBody(),buttonAlign:center, url:ResponseInfo.asp,buttons:formBind:true, text:确定,handler:function()/*movie_form.getForm().submit(method:POST, /表单的提交方式(默认为表单的提交方式,如果未指定则为POST)waitMsg:请稍等,正在登录.,waitTitle:正在验证,url:ResponseInfo.asp,success:function(thisForm,resultAction)Ext.Msg.alert(登录成功,合法用户.+resultAction.response.responseText);,failure:function(thisForm,resultAction)Ext.Msg.alert(登录失败,非法用户.););*/this.ownerCt.getForm().submit(waitTitle:正在提交,/进度条标题文本waitMsg:请稍等,正在提交., /进度条主体显示的消息/reset:当该配置项设置为true时,将导致在操作成功时Form被重置reset/如果指定该项,重置操作将在success 的回调方法和actioncomplete 事件触发之前执行reset:true,success:function(thisForm,resultAction)Ext.Msg.alert(登录成功,合法用户.+resultAction.response.responseText);,failure:function(thisForm,resultAction)/*服务器端返回的信息格式:success:false,errors:info:数据库中无此用户信息,errMsg:非法用户信息,请检测后重新登录/resultAction.failureType:检测到的失败类型。/CLIENT_INVALID:当表单在客户端校验失败并终止提交操作时返回的出错类型/SERVER_INVALID:Form在服务器端校验失败时的返回类型,/表单中特定字段的出错信息包含在响应(response)的errors属性中/CONNECT_FAILURE:当向远程服务器发送请求出错时返回的错误类型/LOAD_FAILURE:当响应的data属性中没有任何值的时候返回的出错类型alert(resultAction.failureType); /connect(连接地址出错),server(连接地址正确)alert(Ext.form.Action.CONNECT_FAILURE); /connectalert(Ext.form.Action.SERVER_INVALID); /server/resultAction.response:用来执行收到的响应对象的XMLHttpRequest操作对象。alert(resultAction.response); /object Objectalert(resultAction.response.status); /404(请求文件不存在),200alert(resultAction.response.statusText);/Objct Not Find(url地址不对),OK/resultAction.result:解码好的响应对象,/包含一个布尔型的success参数和其他详细的操作说明参数alert(resultAction.result); /object Objectalert(resultA); /数据库中无此用户信alert(resultAction.result.errMsg); /非法用户信息,请检测后重新登var obj=Ext.util.JSON.decode(resultAction.response.responseText);alert(obj); /object Objectalert(obj.success); /falsealert(); /数据库中无此用户信息alert(obj.errMsg); /非法用户信息,请检测后重新登录*/服务器连接出错if(resultAction.failureType=Ext.form.Action.CONNECT_FAILURE)Ext.Msg.alert(系统提示,服务器报错:+resultAction.response.status+(+resultAction.response.statusText+);/服务器连接正确,但验证结果不符合要求if(resu