还剩5页未读,继续阅读
文本内容:
1、引入ExtJs框架文件(存入Global.js文件中)document.writelinkrel=\stylesheet\type=\text/css\href=\../extjs/resour__s/css/ext-all.css\/;document.writescripttype=\text/j__ascript\src=\../extjs/adapter/ext/ext-base.js\/script;document.writescripttype=\text/j__ascript\src=\../extjs/ext-all.js\/script;document.writescripttype=\text/j__ascript\src=\../extjs/ext-lang-zh_CN.js\/script;
2、引入Global.js文件scripttype=text/j__ascriptsrc=Global.js/scriptstyletype=text/css.icon{background:urlicon.gif04pxno-repeat!important}/style
3、效果图=====================================================================================================================
4、JS源代码scripttype=text/j__ascriptExt.onReadyfunction{//--开始--Ext.QuickTips.init;//初始化提示信息实例ValueDescription-------------------------------------------------------qtip当鼠标从输入栏移过时显示一个quicktiptitle显示一个默认的浏览器弹出标题属性under在输入栏下显示一个块状div包含出错文本side在输入栏右侧显示一个突出的出错图标[elementid]直接在指定元素的innerHTML中加入出错文本----------------------------------------------------------Ext.form.Field.prototype.msgTarget=side;//======================正则表达式自定义========================Ext.form.VTypes[jackVal]=/^[\u4E00-\u9FA5]+$/;//允许输入//Ext.form.VTypes[jack__sk]=/^[A-Za-z]+$/;//输入指定的字符除此之外不响应Ext.form.VTypes[jackText]=只能输汉字;//提示信息Ext.form.VTypes[jack]=functionv{//检测函数returnExt.form.VTypes[jackVal].testv;}//======================附加正则表达式自定义========================Ext.applyIfExt.form.VTypes{telphone:function_v{return/^\d{3}\-\d{78}$|^\d{4}\-\d{78}$|^\d{3}\d{78}$|^\d{4}\d{78}$|^\d{78}$/.test_v;}telphoneText:请输入合法的__号码telphone__sk:/[0-9\-]/imobile:function_v{return/^1[1-9][0-9]\d{8}$/.test_v;}mobileText:请输入合法__号码mobile__sk:/[0-9]/i};//=====================定义简单数据源===============================varmyStore=newExt.data.______Store{fields:[___Value___Name]data:[[1喜剧][2悲剧][3动作]]};//==============定义动态数据源从服务器端获取数据====================vardynamicStore=newExt.data.Store{/*服务器端返回信息格式:%@LANGUAGE=VBSCRIPTCODEPAGE=65001%metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/%response.Clearresponse.Write{rows:[{___Value:1___Name:喜剧sortOrder:0}response.Write{___Value:2___Name:悲剧sortOrder:1}response.Write{___Value:3___Name:动作sortOrder:2}response.Write{___Value:4___Name:爱情sortOrder:3}]}%*///DataReader对象它处理数据对象并返回Ext.data.Record对象数组Ext.data.Record使用它的id作为键值被缓存reader:newExt.data.JsonReader{fields:[___Value___Name]root:rows}//如果传入此值store将在被创建后使用autoLoad对象作为参数自动调用load方法autoLoad:true//Proxy对象提供访问数据对象的方法proxy:newExt.data.HttpProxy{url:getJsonData.asp}};//dynamicStore.load;//使用配置的Reader从Proxy中加载Record缓存//================================================================varmovie_form;if!movie_form{movie_form=newExt.form.FormPanel{id:myForm//组件唯一的id默认值为一个自动生成的idtitle:电影信息表单//panel头部显示的标题文字默认值为//autoWidth:true//宽度充满整个文档的宽度width:460//表单的宽度autoHeight:true//表单自适应高度//height:400//表单的高度//frame:如果为truepanel具有全部阴影指在panel的整个body区域全部填充背景//否则只在四周渲染一个1像素的边框默认值为falseframe:trueiconCls:icon//提供一个被用作header图标的背景__默认值为//monitorValid:如果为trueform监控自己的客户端校验状态并使用校验状态循环触发__.//如果需要在按钮上使用配置值formBind:true将按钮绑定到表单的校验状态那么该项必须为truemonitorValid:truelabelWidth:80labelAlign:right//collapsible:如果为true,panel是可收缩的,并且有一个收起/展开按钮自动被渲染到它的头部工具区域,//否则panel的大小是固定的,没有按钮默认值为false//collapsible:true//titleCollapse:如果为true当__顶部工具栏上的任何位置时允许panel收缩/展开当collapsible=true//如果为false只有在__工具按钮时才会收缩/展开默认值为false//titleCollapse:trueitems:[{xtype:textfield//组件类型id:movieNamename:movieNamefieldLabel:电影名称allowBlank:falseemptyText:请输入电影名称/*listeners:{//侦听是否按下了回车键specialkey:functionthisFieldeventO__{//参数:当前组件对象键盘__对象//当一个与导航相关的键箭头tab键enter键esc键等等被按下时触发ifeventO__.getKey==eventO__.ENTER{alert你按下了回车键!;//movie_form.getForm.submit;//movie_form.getForm得到数据面板BasicForm对象}}}*/}{xtype:textfieldid:directorname:directorfieldLabel:导演emptyText:请输入该影片的导演allowBlank:false//vtype:alpha//调用ExtJs内置的验证类型vtype:jack//调用自定义验证类型}{xtype:textfieldid:telphonename:telphonefieldLabel:____//vtype:telphonevtype:mobilewidth:200allowBlank:false}{xtype:datefieldid:playDatename:playDatefieldLabel:放映日期for__t:Y-m-d//日期格式化readOnly:true//设置只读value:newDate//默认值allowBlank:false//不允许为空//disabledDays:
[12345]//除周六周日外全部禁用}{xtype:radioid:movieColor1name:movieColorfieldLabel:影片色彩boxLabel:彩色inputValue:cai//提交到数据表中的值checked:true}{xtype:radioid:movieColor2name:movieColorlabelSeparator:boxLabel:黑白inputValue:wb}{xtype:checkboxid:movieQualityname:movieQualityfieldLabel:电影质量inputValue:cha//提交到数据表中的值boxLabel:差}{xtype:comboid:movieTypes//ComboBox的id属性和name属性不能相同name:movieTypefieldLabel:电影类型mode:local//store:myStorestore:dynamicStore//数据源valueField:___Value//绑定到当前ComboBox的底层数据值的名称hiddenName:movieType//提交到数据表中的值真正提交时此combo的name请一定要注意displayField:___Name//列表框前台显示的值triggerAction:all//触发加载所有数据默认为query//for__Selection:如果为true将限制选择的值必须是下拉列表中的值//如果为false允许用户设置任意值到输入栏默认值为falsefor__Selection:true//selectOnFocus:设置为true当获得焦点时立即选中输入栏中存在的所有文本//只有当editable=true时才有效默认值为falseselectOnFocus:falseeditable:true//设置为false以阻止用户直接向该输入项输入文本就像一个传统的select默认值为trueemptyText:请选择readOnly:true//设置只读//typeAhead:设置为true当开始输入字符时在指定的延迟之后会自动匹配剩下的内容//如果找到了匹配的内容则自动选中它typeAheadDelay默认值为falsetypeAhead:trueallowBlank:falseblankText:请选择电影类型//typeAheadDelay:10//pageSize:2anchor:80%listeners:{select:functionthisCombothisRecordcomboIndex{//参数:当前组件对象对象里的记录集对应的索引//alertcomboIndex;//获取列表中对应的索引值从0开始//alertthisCombo.name;//获取列表name的变量名//alertthisRecord.get___Value;//获取选中的下拉列表对应的值}}}{xtype:textareaid:commentname:commentfieldLabel:电影评介emptyText:请输入对此电影的评价height:60//grow:true//growMin:60//当grow=true时所允许的最小高度默认值为60anchor:98%}{xtype:htmleditorenableColors:false//启用回退/高亮颜色按钮默认值为trueenableAlig__ents:false//启用左对其、居中、右对齐按钮默认值为trueenableFont:true//启用字体选择Safari下不可用默认值为trueenableFontSize:true//启用增加/减少字体大小按钮默认值为trueenableLinks:false//启用创建链接按钮Safari下不可用默认值为trueenableSour__Edit:false//启用到源码编辑状体的切换按钮Safari下不可用默认值为trueid:introductions//组件唯一的id默认值为一个自动生成的idname:introductions//该表单域的HTMLname属性值fieldLabel:电影介绍height:140//autoHeight:trueanchor:98%}]//renderTo:Ext.getBodybuttonAlign:__nterurl:ResponseInfo.aspbuttons:[{formBind:truetext:确定handler:function{/*movie_form.getForm.submit{method:POST//表单的提交方式默认为表单的提交方式如果未指定则为POSTwaitMsg:请稍等正在登录...waitTitle:正在验证url:ResponseInfo.aspsuc__ss:functionthisFormresultAction{Ext.Msg.alert登录成功合法用户...+resultAction.response.responseText;}failure:functionthisFormresultAction{Ext.Msg.alert登录失败非法用户...;}};*/this.ownerCt.getForm.submit{waitTitle:正在提交//进度条标题文本waitMsg:请稍等正在提交...//进度条主体显示的消息//reset:当该配置项设置为true时将导致在操作成功时Form被重置reset//如果指定该项重置操作将在suc__ss的回调方法和actioncomplete__触发之前执行reset:truesuc__ss:functionthisFormresultAction{Ext.Msg.alert登录成功合法用户...+resultAction.response.responseText;}failure:functionthisFormresultAction{/*服务器端返回的信息格式:{suc__ss:falseerrors:{info:数据库中无此用户信息}errMsg:非法用户信息请检测后重新登录}//resultAction.failureType:检测到的失败类型//CLIENT_INVALID:当表单在客户端校验失败并终止提交操作时返回的出错类型//SERVER_INVALID:Form在服务器端校验失败时的返回类型//表单中特定字段的出错信息包含在响应response的errors属性中//CONNECT_FAILURE:当向远程服务器发送请求出错时返回的错误类型//LOAD_FAILURE:当响应的data属性中没有任何值的时候返回的出错类型alertresultAction.failureType;//connect连接地址出错server连接地址正确alertExt.form.Action.CONNECT_FAILURE;//connectalertExt.form.Action.SERVER_INVALID;//server//resultAction.response:用来执行收到的响应对象的XMLHttpRequest操作对象alertresultAction.response;//[o__ectO__ect]alertresultAction.response.status;//404请求文件不存在200alertresultAction.response.statusText;//O__ctNotFindurl地址不对OK//resultAction.result:解码好的响应对象//包含一个布尔型的suc__ss参数和其他详细的操作说明参数alertresultAction.result;//[o__ectO__ect]alertresultAction.result.errors.info;//数据库中无此用户信alertresultAction.result.errMsg;//非法用户信息请检测后重新登varo__=Ext.util.JSON.decoderesultAction.response.responseText;alerto__;//[o__ectO__ect]alerto__.suc__ss;//falsealerto__.errors.info;//数据库中无此用户信息alerto__.errMsg;//非法用户信息请检测后重新登录*///服务器连接出错ifresultAction.failureType==Ext.form.Action.CONNECT_FAILURE{Ext.Msg.alert系统提示服务器报错:+resultAction.response.status++resultAction.response.statusText+;}//服务器连接正确但验证结果不符合要求ifresultAction.failureType==Ext.form.Action.SERVER_INVALID{Ext.Msg.alert系统提示服务器响应信息:+resultAction.response.responseText;}//Ext.Msg.alert登录失败非法用户或参数错误...;}};}}{text:取消handler:function{//this.ownerCt.form.reset;movie_form.getForm.reset;}}{text:载入数据handler:function_btn{/*服务器端返回的数据格式:%Response.ContentType=text/xmlResponse.Charset=utf-8%xmlversion=
1.0encoding=utf-8movieInfomovieDatemovieName集结号/movieNamedirector冯小刚/directormobile13636461295/mobilemyDate1979-06-19/myDatemovieType3/movieTypecomment不错的电影/commentintroductions这是一部商业大片/introductions/movieDate/movieInfo*/this.ownerCt.getForm.load{url:getXmlData.aspwaitTitle:正在载入waitMsg:数据正在载入中...};}}]//waitMsgTarget:true//true来遮罩表单自身//errorReader:newExt.data.XmlReader{record:}[]reader:newExt.data.XmlReader{record:movieDate}[{name:movieName__pping:movieName}director{name:telphone__pping:mobile}{name:playDate__pping:myDatetype:datedateFor__t:Y-m-d}movieTypecommentintroductions]};}movie_form.renderExt.getBody;movie_form.getEl.__nter;//--结束--};/script。