ExtJS4学习笔记二--表单控件相关

发布时间:2017-1-23 10:31:03 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"ExtJS4学习笔记二--表单控件相关",主要涉及到ExtJS4学习笔记二--表单控件相关方面的内容,对于ExtJS4学习笔记二--表单控件相关感兴趣的同学可以参考一下。

二、表单部分相关  Html代码   <HTML>    <HEAD>     <TITLE>提示信息</TITLE>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />     <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>     <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>     <script type="text/javascript">       Ext.onReady(function(){           Ext.QuickTips.init();//初始化信息提示功能           var form = new Ext.form.Panel({               title:'表单',//表单标题               height:120,//表单高度               width:200,//表单宽度               frame:true,//是否渲染表单               renderTo :'form',               defaults:{//统一设置表单字段默认属性                   //autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度                   labelSeparator :':',//分隔符                   labelWidth : 50,//标签宽度                   width : 150,//字段宽度                   allowBlank : false,//是否允许为空                   blankText : '不允许为空',                   labelAlign : 'left',//标签对齐方式                   msgTarget :'qtip'          //显示一个浮动的提示信息                   //msgTarget :'title'       //显示一个浏览器原始的浮动提示信息                   //msgTarget :'under'       //在字段下方显示一个提示信息                   //msgTarget :'side'        //在字段的右边显示一个提示信息                   //msgTarget :'none'        //不显示提示信息                   //msgTarget :'errorMsg'    //在errorMsg元素内显示提示信息               },               items:[{                   xtype : 'textfield',                   fieldLabel : '姓名'//标签内容               },{                   xtype : 'numberfield',                   fieldLabel : '年龄'               }]           });       });     </script>    </HEAD>    <BODY STYLE="margin: 10px">       <div id='form'></div>       <!-- 错误信息展示元素 -->       <div id='errorMsg'></div>    </BODY>   </HTML>   Html代码   <div id='form'></div>   Javascript代码   Ext.QuickTips.init();           var loginForm = Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Text示例',               bodyStyle:'padding:5 5 5 5',//表单边距               frame : true,               height:120,               width:200,               renderTo :'form',               defaultType: 'textfield',//设置表单字段的默认类型               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 50,//标签宽度                   width : 150,//字段宽度                   allowBlank : false,//是否允许为空                   labelAlign : 'left',//标签对齐方式                   msgTarget :'side'   //在字段的右边显示一个提示信息               },               items:[{                       fieldLabel : '用户名',                       name : 'userName',                       selectOnFocus : true,//得到焦点时自动选择文本                       //验证电子邮件格式的正则表达式                       regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,                       regexText:'格式错误'//验证错误之后的提示信息,                   },{                       name : 'password',                       fieldLabel : '密码',                       inputType : 'password'//设置输入类型为password                   }               ],               buttons:[{                   text : '登陆',                   handler : function(){                       loginForm.form.setValues({userName:[email protected]',password:'123456'});                   }               }]           });   Javascript代码   Ext.QuickTips.init();           var testForm = Ext.create('Ext.form.Panel',{               title:'Ext.form.field.TextArea示例',               bodyStyle:'padding:5 5 5 5',//表单边距               frame : true,               height:150,               width:250,               renderTo :'form',  //<div id='form'></div>               items:[{                   xtype : 'textarea',                   fieldLabel : '备注',                   id:'memo',//字段组件id                   labelSeparator :':',//分隔符                   labelWidth : 60,//标签宽度                   width:200               }],               buttons:[{text:'确定',handler:showValue}]           })           function showValue(){               var memo = testForm.getForm().findField('memo');//取得输入控件               alert(memo.getValue());//取得控件值           }   Javascript代码   //Ext.form.field.Number示例           Ext.QuickTips.init();           var form = Ext.create('Ext.form.FormPanel',{               title:'Ext.form.field.Number示例',               bodyStyle:'padding:5 5 5 5',//表单边距               renderTo :'form',   //<div id='form'></div>               frame : true,               height:150,               width:250,               defaultType: 'numberfield',//设置表单字段的默认类型               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 80,//标签宽度                   width : 200,//字段宽度                   labelAlign : 'left',//标签对齐方式                   msgTarget :'side'   //在字段的右边显示一个提示信息               },               items:[{                   fieldLabel:'整数',                   hideTrigger : true,//隐藏微调按钮                   allowDecimals : false,//不允许输入小数                   nanText :'请输入有效的整数'//无效数字提示               },{                   fieldLabel:'小数',                   decimalPrecision : 2,//精确到小数点后两位                   allowDecimals : true,//允许输入小数                   nanText :'请输入有效的小数'//无效数字提示               },{                   fieldLabel:'数字限制',                   baseChars :'12345'//输入数字范围               },{                   fieldLabel:'数值限制',                   maxValue : 100,//最大值                   minValue : 50//最小值               }]           });   触发字段:  Javascript代码   //Ext.form.field.Trigger示例           var testForm = Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Trigger示例',               bodyStyle:'padding:5 5 5 5',//表单边距               frame : true,               height:100,               width:270,               renderTo :'form',               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 70,//标签宽度                   width : 200,//字段宽度                   labelAlign : 'left'//标签对齐方式               },               items:[{                   xtype : 'triggerfield',                   id:'memo',                   fieldLabel:'触发字段',                   hideTrigger : false,//不隐藏触发按钮                   onTriggerClick : function(){                       var memo = testForm.getForm().findField('memo');//取得输入控件                       alert(memo.getValue());//取得控件值                       Ext.getCmp('memo').setValue('test');                   }               }]           });   微调字段  Javascript代码   //Ext.form.field.Spinner示例           Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Spinner示例',               bodyStyle:'padding:5 5 5 5',//表单边距               frame : true,               height:70,               width:250,               renderTo :'form',               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 70,//标签宽度                   width : 200,//字段宽度                   labelAlign : 'left'//标签对齐方式               },               items:[{                   xtype : 'spinnerfield',                   fieldLabel:'微调字段',                   id : 'salary',//组件id                   value : 100,//初始化字段值                   onSpinUp : function(){                       var salaryCmp = Ext.getCmp('salary');//通过组件id获取组件对象                       //增加默认值                       salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);                   },                   onSpinDown : function(){                       var salaryCmp = Ext.getCmp('salary');                       //减小默认值                       salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);                   }               }]           });   ComboBox本地数据源示例  Javascript代码   //Ext.form.field.ComboBox本地数据源示例           //创建数据模型           Ext.regModel('PostInfo', {               fields: [{name: 'province'},{name: 'post'}]           });           //定义组合框中显示的数据源           var postStore = Ext.create('Ext.data.Store',{               model : 'PostInfo',               data : [                   {province:'北京',post:'100000'},                   {province:'通县',post:'101100'},                   {province:'昌平',post:'102200'},                   {province:'大兴',post:'102600'},                   {province:'密云',post:'101500'},                   {province:'延庆',post:'102100'},                   {province:'顺义',post:'101300'},                   {province:'怀柔',post:'101400'}               ]           });           //创建表单           Ext.create('Ext.form.Panel',{               title:'Ext.form.field.ComboBox本地数据源示例',               renderTo: Ext.getBody(),               bodyPadding: 5,               frame : true,               height:100,               width:270,               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 70,//标签宽度                   width : 200,//字段宽度                   labelAlign : 'left'//标签对齐方式               },               items:[{                   xtype : 'combo',                   listConfig : {                       emptyText : '未找到匹配值',//当值不在列表是的提示信息                       maxHeight : 60//设置下拉列表的最大高度为60像素                   },                   name:'post',                   autoSelect : true,                   fieldLabel:'邮政编码',                   triggerAction: 'all',//单击触发按钮显示全部数据                   store : postStore,//设置数据源                   displayField:'province',//定义要显示的字段                   valueField:'post',//定义值字段                   queryMode: 'local',//本地模式                   forceSelection : true,//要求输入值必须在列表中存在                   typeAhead : true,//允许自动选择匹配的剩余部分文本                   value:'102600'//默认选择大兴               }]           });   Ext.form.field.Time示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Time示例',               renderTo: Ext.getBody(),               bodyPadding: 5,               frame : true,               height:100,               width:300,               items:[{                   fieldLabel:'时间选择框',                   xtype : 'timefield',                   width : 220,                   labelSeparator :':',//分隔符                   msgTarget :'side',//在字段的右边显示一个提示信息                   autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度                   maxValue : '18:00',//最大时间                   maxText : '时间应小于{0}',//大于最大时间的提示信息                   minValue : '10:00',//最小时间                   minText : '时间应大于{0}',//小于最小时间的提示信息                   pickerMaxHeight : 70,//下拉列表的最大高度                   increment : 60,//时间间隔为60分钟                   format : 'G时i分s秒 ',//G标示为24时计时法                   invalidText :'时间格式无效'               }]           });   Ext.form.field.Date示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Time示例',               renderTo: Ext.getBody(),               bodyPadding: 5,               frame : true,               height:100,               width:300,               items:[{                   fieldLabel:'时间选择框',                   xtype : 'timefield',                   width : 220,                   labelSeparator :':',//分隔符                   msgTarget :'side',//在字段的右边显示一个提示信息                   autoFitErrors : false,//展示错误信息时是否自动调整字段组件宽度                   maxValue : '18:00',//最大时间                   maxText : '时间应小于{0}',//大于最大时间的提示信息                   minValue : '10:00',//最小时间                   minText : '时间应大于{0}',//小于最小时间的提示信息                   pickerMaxHeight : 70,//下拉列表的最大高度                   increment : 60,//时间间隔为60分钟                   format : 'G时i分s秒 ',//G标示为24时计时法                   invalidText :'时间格式无效'               }]           });   Ext.form.field.Hidden示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Hidden示例',               frame : true,               height:100,               width:300,               renderTo: Ext.getBody(),               bodyPadding: 5,               defaultType: 'textfield',//设置表单字段的默认类型               defaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 70,//标签宽度                   width : 200,//字段宽度                   labelAlign : 'left'//标签对齐方式               },               items:[{                   name:'userName',                   fieldLabel:'姓名'               },{//隐藏域                   name:'age',                   xtype : 'hidden'               },{                   name:'sex',                   fieldLabel:'性别'               }]           });   Ext.form.field.HtmlEditor示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.field.HtmlEditor示例',               width : 630,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               items:[{                   fieldLabel:'HTML字段',                   xtype : 'htmleditor',                   height:150,                   width : 600,                   value : 'ExtJS4登场',                   labelWidth : 70,//标签宽度                   labelSeparator :':',//分隔符                   createLinkText : '创建超链接',//创建连接的提示信息                   defaultLinkValue : "http://www.",//连接的默认格式                   enableAlignments : true,//起用左、中、右对齐按钮                   enableColors : true,//起用前景色、背景色选择按钮                   enableFont : true,//起用字体选择按钮                   enableFontSize : true,//起用字体增大和缩写按钮                   enableFormat : true,//起用粗体、斜体、下划线按钮                   enableLinks : true,//起用创建连接按钮                   enableLists : true,//起用列表按钮                   enableSourceEdit : true,//起用源代码编辑按钮                   fontFamilies:['宋体','隶书','黑体'],//字体列表                   buttonTips :{                       bold : {                           title: 'Bold (Ctrl+B)',                           text: '粗体'                       },                       italic : {                           title: 'Italic (Ctrl+I)',                           text: '斜体'                       },                       underline : {                           title: 'Underline (Ctrl+U)',                           text: '下划线'                       },                       increasefontsize : {                           title: 'Grow Text',                           text: '增大字体'                       },                       decreasefontsize : {                           title: 'Shrink Text',                           text: '缩小字体'                       },                       backcolor : {                           title: 'Text Highlight Color',                           text: '背景色'                       },                       forecolor : {                           title: 'Font Color',                           text: '前景色'                       },                       justifyleft : {                           title: 'Align Text Left',                           text: '左对齐'                       },                       justifycenter : {                           title: 'Center Text',                           text: '居中对齐'                       },                       justifyright : {                           title: 'Align Text Right',                           text: '右对齐'                       },                       insertunorderedlist : {                           title: 'Bullet List',                           text: '项目符号'                       },                       insertorderedlist : {                           title: 'Numbered List',                           text: '数字编号'                       },                       createlink : {                           title: 'Hyperlink',                           text: '超连接'                       },                       sourceedit : {                           title: 'Source Edit',                           text: '切换源代码编辑模式'                       }                   }               }]           });   Ext.form.field.Display示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.field.Display示例',               width : 200,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               items:[{                   fieldLabel:'展示字段',                   xtype : 'displayfield',                   value : '<b>ExtJS4登场</b>',                   labelWidth : 70,//标签宽度                   labelSeparator :':'//分隔符               }]           });   Ext.form.Label示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.Label示例',               width : 200,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               items:[ {                   xtype: 'label',                   forId: 'userName',//关联inputId为userName的表单字段                   text: '用户名'               },{                   name:'userName',                   xtype : 'textfield',                   inputId : 'userName',                   hideLabel : true //隐藏字段标签               }]           });   Ext.form.FieldSet示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.FieldSet示例',               labelWidth : 40,//标签宽度               width : 220,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               items:[{                   title:'产品信息',                   xtype : 'fieldset',                   collapsible : true,//显示切换展开收缩状态的切换按钮                   bodyPadding: 5,                   defaults:{//统一设置表单字段默认属性                       labelSeparator :':',//分隔符                       labelWidth : 50,//标签宽度                       width : 160//字段宽度                   },                   defaultType: 'textfield',//设置表单字段的默认类型                   items:[{                       fieldLabel:'产地'                   },{                       fieldLabel:'售价'                   }]               },{                   title:'产品描述',                   xtype : 'fieldset',                   bodyPadding: 5,                   checkboxToggle : true,//显示切换展开收缩状态的复选框                   checkboxName : 'description',//提交数据时复选框对应的name                   labelSeparator :':',//分隔符                   items:[{                       fieldLabel:'简介',                       labelSeparator :':',//分隔符                       labelWidth : 50,//标签宽度                       width : 160,//字段宽度                       xtype : 'textarea'                   }]               }]           });   Ext.form.FieldContainer示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'Ext.form.FieldContainer示例',               width : 300,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               fieldDefaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 60,//标签宽度                   width : 260,//字段宽度                   msgTarget : 'side'               },               defaultType: 'textfield',//设置表单字段的默认类型               items:[{                   fieldLabel:'商品名称'               },{                   xtype: 'fieldcontainer',                   fieldLabel: '生产日期',                   layout: {//设置容器字段布局                       type: 'hbox',                       align: 'middle'//垂直居中                   },                   combineErrors : true,//合并展示错误信息                   fieldDefaults: {                       hideLabel: true,//隐藏字段标签                       allowBlank : false//设置字段值不允许为空                   },                   defaultType: 'textfield',//设置表单字段的默认类型                   items: [{                       fieldLabel: '年',                       flex: 1,                       inputId : 'yearId'                   },{                       xtype: 'label',                       forId : 'yearId',                       text: '年'                   },{                       fieldLabel: '月',                       flex: 1,                       inputId : 'monthId'                   },{                       xtype: 'label',                       forId : 'monthId',                       text: '月'                   },{                       fieldLabel: '日',                       flex: 1,                       inputId : 'dayId'                   },{                       xtype: 'label',                       forId : 'dayId',                       text: '日'                   }]               },{                   fieldLabel:'产地来源'               }]           });   vtype示例:  Javascript代码   Ext.create('Ext.form.Panel',{               title:'vtype示例',               width : 300,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               defaultType: 'textfield',//设置表单字段的默认类型               fieldDefaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 80,//标签宽度                   width : 270,//字段宽度                   msgTarget : 'side'               },               items:[{                   fieldLabel:'电子邮件',                   vtype:'email'               },{                   fieldLabel:'网址',                   vtype:'url'               },{                   fieldLabel:'字母',                   vtype:'alpha'               },{                   fieldLabel:'字母和数字',                   vtype:'alphanum'               }]           });   自定义电话号码验证示例:  Javascript代码   //自定义电话号码的vtype验证           Ext.apply(Ext.form.field.VTypes, {               phone:  function(v) {                   //规则区号(3-4位数字)-电话号码(7-8位数字)                   return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);               },               phoneText: '请输入有效的电话号码',               phoneMask: /[\d-]/i//只允许输入数字和-号           });           Ext.QuickTips.init();           Ext.create('Ext.form.Panel',{               title:'自定义电话号码验证示例',               width : 300,               frame : true,               renderTo: Ext.getBody(),               bodyPadding: 5,               defaultType: 'textfield',//设置表单字段的默认类型               fieldDefaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 80,//标签宽度                   width : 270,//字段宽度                   msgTarget : 'side'               },               items:[{                   fieldLabel:'住宅号码',                   vtype:'phone'//使用电话类型验证               },{                   fieldLabel:'办公号码',                   vtype:'phone'//使用电话类型验证               }]           });   自定义日期范围验证示例:  Javascript代码   //自定义VType类型,验证日期选择范围           Ext.apply(Ext.form.field.VTypes, {               //验证方法               dateRange : function(val, field) {                   var beginDate = null,//开始日期                       beginDateCmp = null,//开始日期组件                       endDate = null,//结束日期                       endDateCmp = null,//结束日期组件                       validStatus = true;//验证状态                   if(field.dateRange){                       //获取开始时间                       if(!Ext.isEmpty(field.dateRange.begin)){                           beginDateCmp = Ext.getCmp(field.dateRange.begin);                           beginDate = beginDateCmp.getValue();                       }                       //获取结束时间                       if(!Ext.isEmpty(field.dateRange.end)){                           endDateCmp = Ext.getCmp(field.dateRange.end);                           endDate = endDateCmp.getValue();                       }                   }                   //如果开始日期或结束日期有一个为空则校验通过                   if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){                       validStatus =  beginDate <= endDate;                   }                                      return validStatus;               },               //验证提示信息               dateRangeText : '开始日期不能大于结束日期,请重新选择。'           });           Ext.QuickTips.init();//初始化提示;           var dateForm = Ext.create('Ext.form.Panel',{               title:'自定义日期范围验证示例',               frame : true,               width:250,               renderTo: Ext.getBody(),               bodyPadding: 5,               fieldDefaults:{//统一设置表单字段默认属性                   autoFitErrors : false,//不自动调整字段宽度                   labelSeparator :':',//分隔符                   labelWidth : 90,//标签宽度                   width : 210,//字段宽度                   format:'Y年n月j日',//显示日期的格式                   editable : false,//设置只读                   allowBlank : false,//不允许为空                   msgTarget : 'side'//设置提示信息展示位置               },               defaultType: 'datefield',//设置表单字段的默认类型               items:[{                   id:'beginDate1',                   fieldLabel:'入学开始日期',                   dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange                   vtype:'dateRange'               },{                   id:'endDate1',                   fieldLabel:'入学结束日期',                   dateRange:{begin:'beginDate1',end:'endDate1'},//用于vtype类型dateRange                   vtype:'dateRange'               },{                   id:'beginDate2',                   fieldLabel:'毕业开始日期',                   dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange                   vtype:'dateRange'               },{                   id:'endDate2',                   fieldLabel:'毕业结束日期',                   dateRange:{begin:'beginDate2',end:'endDate2'},//用于vtype类型dateRange                   vtype:'dateRange'               }]           });   Ajax模式的表单数据加载:  Html代码   <HTML>    <HEAD>     <TITLE>Ajax模式的表单数据加载</TITLE>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />     <script type="text/javascript" src="extjs4/bootstrap.js"></script>     <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>     <script type="text/javascript">       Ext.onReady(function(){           Ext.QuickTips.init();//初始化提示;           var productForm = Ext.create('Ext.form.Panel',{               title:'表单加载示例',               width : 300,               frame : true,               fieldDefaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 80,//标签宽度                   width : 200               },               renderTo: Ext.getBody(),               items:[{                   fieldLabel:'产品名称',                   xtype : 'textfield',                   name : 'productName',                   value:'U盘'//同步加载数据               },{                   fieldLabel:'金额',                   xtype : 'numberfield',                   name : 'price',                   value : 100//同步加载数据               },{                   fieldLabel:'生产日期',                   xtype : 'datefield',                   format:'Y年m月d日',//显示日期的格式                   name : 'date',                   value : new Date()//同步加载数据               },{                   xtype : 'hidden',                   name : 'productId',                   value:'001'//产品id               },{                   fieldLabel:'产品简介',                   name : 'introduction',                   xtype : 'textarea'               }],               buttons:[{                   text : '加载简介',                   handler : loadIntroduction               }]           });           //表单加载数据的回调函数           function loadIntroduction(){               var params = productForm.getForm().getValues();               productForm.getForm().load({                   params : params,//传递参数                   url : 'productServer.jsp',//请求的url地址                   method:'GET',//请求方式                   success:function(form,action){//加载成功的处理函数                       Ext.Msg.alert('提示','产品简介加载成功');                   },                   failure:function(form,action){//加载失败的处理函数                       Ext.Msg.alert('提示','产品简介加载失败<br>失败原因:'+action.result.errorMessage);                   }               });           }       });     </script>    </HEAD>    <BODY STYLE="margin: 10px"></BODY>   </HTML>   Jsp代码   <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   <%   //获取产品id   String productId = request.getParameter("productId");   if("001".equals(productId)){       String msg = "{success:true,data:{introduction:'本产品美观实用,售后服务优秀。'}}";       response.getWriter().write(msg);   }else{       String msg = "{success:false,errorMessage:'数据不存在'}";       response.getWriter().write(msg);   }   %>   另外一种方式:  Java代码   public String getProductInfo(String productId)       {           String msg = "";           if("001".equals(productId)){               msg = "1本产品美观实用,售后服务优秀。";           }else{               msg = "0数据不存在";           }           return msg;       }   Javascript代码   //表单加载数据的回调函数           function loadIntroduction(){               var params = productForm.getForm().getValues();               testdwr.getProductInfo(params.productId,function(ret){                   if(ret.substring(0,1) == '1')                   {                       Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));                       Ext.Msg.alert('提示','产品简介加载成功');                   }                   else                   {                       Ext.Msg.alert('提示','产品简介加载失败<br>失败原因:'+ret.substring(1,ret.length-1));                   }               });           }   登录简单处理:  Html代码   <HTML>    <HEAD>     <TITLE>Ajax模式的表单数据提交</TITLE>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />     <script type="text/javascript" src="extjs4/bootstrap.js"></script>     <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>     <script type="text/javascript">       Ext.onReady(function(){           Ext.QuickTips.init();//初始化提示;           var loginForm = Ext.create('Ext.form.Panel',{               title:'表单提交示例',               width : 230,               frame : true,               fieldDefaults:{//统一设置表单字段默认属性                   labelSeparator :':',//分隔符                   labelWidth : 50,//标签宽度                   msgTarget : 'side',                   width : 200               },               renderTo: Ext.getBody(),               bodyPadding: 5,               defaultType: 'textfield',//设置表单字段的默认类型               items:[{                   fieldLabel:'用户名',                   name : 'userName',                   allowBlank : false,                   vtype:'email'               },{                   fieldLabel:'密码',                   name : 'password',                   inputType : 'password',                   allowBlank : false               }],               buttons:[{                   text : '登陆',                   handler : login               },{                   text : '重置',                   handler : reset               }]           });           function login(){//提交表单               loginForm.getForm().submit({                   clientValidation:true,//进行客户端验证                   url : 'loginServer.jsp',//请求的url地址                   method:'GET',//请求方式                   success:function(form,action){//加载成功的处理函数                       Ext.Msg.alert('提示','系统登陆成功');                   },                   failure:function(form,action){//加载失败的处理函数                       Ext.Msg.alert('提示','系统登陆失败,原因:'+action.failureType);                   }               });           }           function reset(){//重置表单               loginForm.form.reset();           }       });     </script>    </HEAD>    <BODY  STYLE="margin: 10px"></BODY>   </HTML>   Jsp代码   <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>   <%       String password = request.getParameter("password");       String msg = "";       if(password.length() < 6){//密码不足6位验证失败           msg = "{success:false,errors:{password:'密码不得小于六位数字'}}";       }else{//验证成功           msg = "{success:true}";       }       response.getWriter().write(msg);   %>  

上一篇:C# 知识点收集
下一篇:十个让你变成糟糕的程序员的行为

相关文章

相关评论