ExtJS4學習筆記二－－表單控件相關

原創 yyhm 2020-02-20 19:12
二、表單部分相關 
Html代碼  收藏代碼
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>提示信息</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化信息提示功能  
  11.         var form = new Ext.form.Panel({  
  12.             title:'表單',//表單標題  
  13.             height:120,//表單高度  
  14.             width:200,//表單寬度  
  15.             frame:true,//是否渲染表單  
  16.             renderTo :'form',  
  17.             defaults:{//統一設置表單字段默認屬性  
  18.                 //autoFitErrors : false,//展示錯誤信息時是否自動調整字段組件寬度  
  19.                 labelSeparator :'：',//分隔符  
  20.                 labelWidth : 50,//標籤寬度  
  21.                 width : 150,//字段寬度  
  22.                 allowBlank : false,//是否允許爲空  
  23.                 blankText : '不允許爲空',  
  24.                 labelAlign : 'left',//標籤對齊方式  
  25.                 msgTarget :'qtip'          //顯示一個浮動的提示信息  
  26.                 //msgTarget :'title'       //顯示一個瀏覽器原始的浮動提示信息  
  27.                 //msgTarget :'under'       //在字段下方顯示一個提示信息  
  28.                 //msgTarget :'side'        //在字段的右邊顯示一個提示信息  
  29.                 //msgTarget :'none'        //不顯示提示信息  
  30.                 //msgTarget :'errorMsg'    //在errorMsg元素內顯示提示信息  
  31.             },  
  32.             items:[{  
  33.                 xtype : 'textfield',  
  34.                 fieldLabel : '姓名'//標籤內容  
  35.             },{  
  36.                 xtype : 'numberfield',  
  37.                 fieldLabel : '年齡'  
  38.             }]  
  39.         });  
  40.     });  
  41.   </script>  
  42.  </HEAD>  
  43.  <BODY STYLE="margin: 10px">  
  44.     <div id='form'></div>  
  45.     <!-- 錯誤信息展示元素 -->  
  46.     <div id='errorMsg'></div>  
  47.  </BODY>  
  48. </HTML>  

Html代碼  收藏代碼
  1. <div id='form'></div>  

Javascript代碼  收藏代碼
  1. Ext.QuickTips.init();  
  2.         var loginForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Text示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表單邊距  
  5.             frame : true,  
  6.             height:120,  
  7.             width:200,  
  8.             renderTo :'form',  
  9.             defaultType: 'textfield',//設置表單字段的默認類型  
  10.             defaults:{//統一設置表單字段默認屬性  
  11.                 labelSeparator :'：',//分隔符  
  12.                 labelWidth : 50,//標籤寬度  
  13.                 width : 150,//字段寬度  
  14.                 allowBlank : false,//是否允許爲空  
  15.                 labelAlign : 'left',//標籤對齊方式  
  16.                 msgTarget :'side'   //在字段的右邊顯示一個提示信息  
  17.             },  
  18.             items:[{  
  19.                     fieldLabel : '用戶名',  
  20.                     name : 'userName',  
  21.                     selectOnFocus : true,//得到焦點時自動選擇文本  
  22.                     //驗證電子郵件格式的正則表達式  
  23.                     regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,  
  24.                     regexText:'格式錯誤'//驗證錯誤之後的提示信息,  
  25.                 },{  
  26.                     name : 'password',  
  27.                     fieldLabel : '密碼',  
  28.                     inputType : 'password'//設置輸入類型爲password  
  29.                 }  
  30.             ],  
  31.             buttons:[{  
  32.                 text : '登陸',  
  33.                 handler : function(){  
  34.                     loginForm.form.setValues({userName:'user@com',password:'123456'});  
  35.                 }  
  36.             }]  
  37.         });  

Javascript代碼  收藏代碼
  1. Ext.QuickTips.init();  
  2.         var testForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.TextArea示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表單邊距  
  5.             frame : true,  
  6.             height:150,  
  7.             width:250,  
  8.             renderTo :'form',  //<div id='form'></div>  
  9.             items:[{  
  10.                 xtype : 'textarea',  
  11.                 fieldLabel : '備註',  
  12.                 id:'memo',//字段組件id  
  13.                 labelSeparator :'：',//分隔符  
  14.                 labelWidth : 60,//標籤寬度  
  15.                 width:200  
  16.             }],  
  17.             buttons:[{text:'確定',handler:showValue}]  
  18.         })  
  19.         function showValue(){  
  20.             var memo = testForm.getForm().findField('memo');//取得輸入控件  
  21.             alert(memo.getValue());//取得控件值  
  22.         }  

Javascript代碼  收藏代碼
  1. //Ext.form.field.Number示例  
  2.         Ext.QuickTips.init();  
  3.         var form = Ext.create('Ext.form.FormPanel',{  
  4.             title:'Ext.form.field.Number示例',  
  5.             bodyStyle:'padding:5 5 5 5',//表單邊距  
  6.             renderTo :'form',   //<div id='form'></div>  
  7.             frame : true,  
  8.             height:150,  
  9.             width:250,  
  10.             defaultType: 'numberfield',//設置表單字段的默認類型  
  11.             defaults:{//統一設置表單字段默認屬性  
  12.                 labelSeparator :'：',//分隔符  
  13.                 labelWidth : 80,//標籤寬度  
  14.                 width : 200,//字段寬度  
  15.                 labelAlign : 'left',//標籤對齊方式  
  16.                 msgTarget :'side'   //在字段的右邊顯示一個提示信息  
  17.             },  
  18.             items:[{  
  19.                 fieldLabel:'整數',  
  20.                 hideTrigger : true,//隱藏微調按鈕  
  21.                 allowDecimals : false,//不允許輸入小數  
  22.                 nanText :'請輸入有效的整數'//無效數字提示  
  23.             },{  
  24.                 fieldLabel:'小數',  
  25.                 decimalPrecision : 2,//精確到小數點後兩位  
  26.                 allowDecimals : true,//允許輸入小數  
  27.                 nanText :'請輸入有效的小數'//無效數字提示  
  28.             },{  
  29.                 fieldLabel:'數字限制',  
  30.                 baseChars :'12345'//輸入數字範圍  
  31.             },{  
  32.                 fieldLabel:'數值限制',  
  33.                 maxValue : 100,//最大值  
  34.                 minValue : 50//最小值  
  35.             }]  
  36.         });  

觸發字段： 
Javascript代碼  收藏代碼
  1. //Ext.form.field.Trigger示例  
  2.         var testForm = Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Trigger示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表單邊距  
  5.             frame : true,  
  6.             height:100,  
  7.             width:270,  
  8.             renderTo :'form',  
  9.             defaults:{//統一設置表單字段默認屬性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//標籤寬度  
  12.                 width : 200,//字段寬度  
  13.                 labelAlign : 'left'//標籤對齊方式  
  14.             },  
  15.             items:[{  
  16.                 xtype : 'triggerfield',  
  17.                 id:'memo',  
  18.                 fieldLabel:'觸發字段',  
  19.                 hideTrigger : false,//不隱藏觸發按鈕  
  20.                 onTriggerClick : function(){  
  21.                     var memo = testForm.getForm().findField('memo');//取得輸入控件  
  22.                     alert(memo.getValue());//取得控件值  
  23.                     Ext.getCmp('memo').setValue('test');  
  24.                 }  
  25.             }]  
  26.         });  

微調字段 
Javascript代碼  收藏代碼
  1. //Ext.form.field.Spinner示例  
  2.         Ext.create('Ext.form.Panel',{  
  3.             title:'Ext.form.field.Spinner示例',  
  4.             bodyStyle:'padding:5 5 5 5',//表單邊距  
  5.             frame : true,  
  6.             height:70,  
  7.             width:250,  
  8.             renderTo :'form',  
  9.             defaults:{//統一設置表單字段默認屬性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//標籤寬度  
  12.                 width : 200,//字段寬度  
  13.                 labelAlign : 'left'//標籤對齊方式  
  14.             },  
  15.             items:[{  
  16.                 xtype : 'spinnerfield',  
  17.                 fieldLabel:'微調字段',  
  18.                 id : 'salary',//組件id  
  19.                 value : 100,//初始化字段值  
  20.                 onSpinUp : function(){  
  21.                     var salaryCmp = Ext.getCmp('salary');//通過組件id獲取組件對象  
  22.                     //增加默認值  
  23.                     salaryCmp.setValue(Number(salaryCmp.getValue()) + 1);  
  24.                 },  
  25.                 onSpinDown : function(){  
  26.                     var salaryCmp = Ext.getCmp('salary');  
  27.                     //減小默認值  
  28.                     salaryCmp.setValue(Number(salaryCmp.getValue()) - 1);  
  29.                 }  
  30.             }]  
  31.         });  

ComboBox本地數據源示例 
Javascript代碼  收藏代碼
  1. //Ext.form.field.ComboBox本地數據源示例  
  2.         //創建數據模型  
  3.         Ext.regModel('PostInfo', {  
  4.             fields: [{name: 'province'},{name: 'post'}]  
  5.         });  
  6.         //定義組合框中顯示的數據源  
  7.         var postStore = Ext.create('Ext.data.Store',{  
  8.             model : 'PostInfo',  
  9.             data : [  
  10.                 {province:'北京',post:'100000'},  
  11.                 {province:'通縣',post:'101100'},  
  12.                 {province:'昌平',post:'102200'},  
  13.                 {province:'大興',post:'102600'},  
  14.                 {province:'密雲',post:'101500'},  
  15.                 {province:'延慶',post:'102100'},  
  16.                 {province:'順義',post:'101300'},  
  17.                 {province:'懷柔',post:'101400'}  
  18.             ]  
  19.         });  
  20.         //創建表單  
  21.         Ext.create('Ext.form.Panel',{  
  22.             title:'Ext.form.field.ComboBox本地數據源示例',  
  23.             renderTo: Ext.getBody(),  
  24.             bodyPadding: 5,  
  25.             frame : true,  
  26.             height:100,  
  27.             width:270,  
  28.             defaults:{//統一設置表單字段默認屬性  
  29.                 labelSeparator :'：',//分隔符  
  30.                 labelWidth : 70,//標籤寬度  
  31.                 width : 200,//字段寬度  
  32.                 labelAlign : 'left'//標籤對齊方式  
  33.             },  
  34.             items:[{  
  35.                 xtype : 'combo',  
  36.                 listConfig : {  
  37.                     emptyText : '未找到匹配值',//當值不在列表是的提示信息  
  38.                     maxHeight : 60//設置下拉列表的最大高度爲60像素  
  39.                 },  
  40.                 name:'post',  
  41.                 autoSelect : true,  
  42.                 fieldLabel:'郵政編碼',  
  43.                 triggerAction: 'all',//單擊觸發按鈕顯示全部數據  
  44.                 store : postStore,//設置數據源  
  45.                 displayField:'province',//定義要顯示的字段  
  46.                 valueField:'post',//定義值字段  
  47.                 queryMode: 'local',//本地模式  
  48.                 forceSelection : true,//要求輸入值必須在列表中存在  
  49.                 typeAhead : true,//允許自動選擇匹配的剩餘部分文本  
  50.                 value:'102600'//默認選擇大興  
  51.             }]  
  52.         });  

Ext.form.field.Time示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Time示例',  
  3.             renderTo: Ext.getBody(),  
  4.             bodyPadding: 5,  
  5.             frame : true,  
  6.             height:100,  
  7.             width:300,  
  8.             items:[{  
  9.                 fieldLabel:'時間選擇框',  
  10.                 xtype : 'timefield',  
  11.                 width : 220,  
  12.                 labelSeparator :'：',//分隔符  
  13.                 msgTarget :'side',//在字段的右邊顯示一個提示信息  
  14.                 autoFitErrors : false,//展示錯誤信息時是否自動調整字段組件寬度  
  15.                 maxValue : '18:00',//最大時間  
  16.                 maxText : '時間應小於{0}',//大於最大時間的提示信息  
  17.                 minValue : '10:00',//最小時間  
  18.                 minText : '時間應大於{0}',//小於最小時間的提示信息  
  19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
  20.                 increment : 60,//時間間隔爲60分鐘  
  21.                 format : 'G時i分s秒 ',//G標示爲24時計時法  
  22.                 invalidText :'時間格式無效'  
  23.             }]  
  24.         });  

Ext.form.field.Date示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Time示例',  
  3.             renderTo: Ext.getBody(),  
  4.             bodyPadding: 5,  
  5.             frame : true,  
  6.             height:100,  
  7.             width:300,  
  8.             items:[{  
  9.                 fieldLabel:'時間選擇框',  
  10.                 xtype : 'timefield',  
  11.                 width : 220,  
  12.                 labelSeparator :'：',//分隔符  
  13.                 msgTarget :'side',//在字段的右邊顯示一個提示信息  
  14.                 autoFitErrors : false,//展示錯誤信息時是否自動調整字段組件寬度  
  15.                 maxValue : '18:00',//最大時間  
  16.                 maxText : '時間應小於{0}',//大於最大時間的提示信息  
  17.                 minValue : '10:00',//最小時間  
  18.                 minText : '時間應大於{0}',//小於最小時間的提示信息  
  19.                 pickerMaxHeight : 70,//下拉列表的最大高度  
  20.                 increment : 60,//時間間隔爲60分鐘  
  21.                 format : 'G時i分s秒 ',//G標示爲24時計時法  
  22.                 invalidText :'時間格式無效'  
  23.             }]  
  24.         });  

Ext.form.field.Hidden示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Hidden示例',  
  3.             frame : true,  
  4.             height:100,  
  5.             width:300,  
  6.             renderTo: Ext.getBody(),  
  7.             bodyPadding: 5,  
  8.             defaultType: 'textfield',//設置表單字段的默認類型  
  9.             defaults:{//統一設置表單字段默認屬性  
  10.                 labelSeparator :'：',//分隔符  
  11.                 labelWidth : 70,//標籤寬度  
  12.                 width : 200,//字段寬度  
  13.                 labelAlign : 'left'//標籤對齊方式  
  14.             },  
  15.             items:[{  
  16.                 name:'userName',  
  17.                 fieldLabel:'姓名'  
  18.             },{//隱藏域  
  19.                 name:'age',  
  20.                 xtype : 'hidden'  
  21.             },{  
  22.                 name:'sex',  
  23.                 fieldLabel:'性別'  
  24.             }]  
  25.         });  

Ext.form.field.HtmlEditor示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.HtmlEditor示例',  
  3.             width : 630,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[{  
  8.                 fieldLabel:'HTML字段',  
  9.                 xtype : 'htmleditor',  
  10.                 height:150,  
  11.                 width : 600,  
  12.                 value : 'ExtJS4登場',  
  13.                 labelWidth : 70,//標籤寬度  
  14.                 labelSeparator :'：',//分隔符  
  15.                 createLinkText : '創建超鏈接',//創建連接的提示信息  
  16.                 defaultLinkValue : "http://www.",//連接的默認格式  
  17.                 enableAlignments : true,//起用左、中、右對齊按鈕  
  18.                 enableColors : true,//起用前景色、背景色選擇按鈕  
  19.                 enableFont : true,//起用字體選擇按鈕  
  20.                 enableFontSize : true,//起用字體增大和縮寫按鈕  
  21.                 enableFormat : true,//起用粗體、斜體、下劃線按鈕  
  22.                 enableLinks : true,//起用創建連接按鈕  
  23.                 enableLists : true,//起用列表按鈕  
  24.                 enableSourceEdit : true,//起用源代碼編輯按鈕  
  25.                 fontFamilies:['宋體','隸書','黑體'],//字體列表  
  26.                 buttonTips :{  
  27.                     bold : {  
  28.                         title: 'Bold (Ctrl+B)',  
  29.                         text: '粗體'  
  30.                     },  
  31.                     italic : {  
  32.                         title: 'Italic (Ctrl+I)',  
  33.                         text: '斜體'  
  34.                     },  
  35.                     underline : {  
  36.                         title: 'Underline (Ctrl+U)',  
  37.                         text: '下劃線'  
  38.                     },  
  39.                     increasefontsize : {  
  40.                         title: 'Grow Text',  
  41.                         text: '增大字體'  
  42.                     },  
  43.                     decreasefontsize : {  
  44.                         title: 'Shrink Text',  
  45.                         text: '縮小字體'  
  46.                     },  
  47.                     backcolor : {  
  48.                         title: 'Text Highlight Color',  
  49.                         text: '背景色'  
  50.                     },  
  51.                     forecolor : {  
  52.                         title: 'Font Color',  
  53.                         text: '前景色'  
  54.                     },  
  55.                     justifyleft : {  
  56.                         title: 'Align Text Left',  
  57.                         text: '左對齊'  
  58.                     },  
  59.                     justifycenter : {  
  60.                         title: 'Center Text',  
  61.                         text: '居中對齊'  
  62.                     },  
  63.                     justifyright : {  
  64.                         title: 'Align Text Right',  
  65.                         text: '右對齊'  
  66.                     },  
  67.                     insertunorderedlist : {  
  68.                         title: 'Bullet List',  
  69.                         text: '項目符號'  
  70.                     },  
  71.                     insertorderedlist : {  
  72.                         title: 'Numbered List',  
  73.                         text: '數字編號'  
  74.                     },  
  75.                     createlink : {  
  76.                         title: 'Hyperlink',  
  77.                         text: '超連接'  
  78.                     },  
  79.                     sourceedit : {  
  80.                         title: 'Source Edit',  
  81.                         text: '切換源代碼編輯模式'  
  82.                     }  
  83.                 }  
  84.             }]  
  85.         });  

Ext.form.field.Display示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.field.Display示例',  
  3.             width : 200,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[{  
  8.                 fieldLabel:'展示字段',  
  9.                 xtype : 'displayfield',  
  10.                 value : '<b>ExtJS4登場</b>',  
  11.                 labelWidth : 70,//標籤寬度  
  12.                 labelSeparator :'：'//分隔符  
  13.             }]  
  14.         });  

Ext.form.Label示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.Label示例',  
  3.             width : 200,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             items:[ {  
  8.                 xtype: 'label',  
  9.                 forId: 'userName',//關聯inputId爲userName的表單字段  
  10.                 text: '用戶名'  
  11.             },{  
  12.                 name:'userName',  
  13.                 xtype : 'textfield',  
  14.                 inputId : 'userName',  
  15.                 hideLabel : true //隱藏字段標籤  
  16.             }]  
  17.         });  

Ext.form.FieldSet示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.FieldSet示例',  
  3.             labelWidth : 40,//標籤寬度  
  4.             width : 220,  
  5.             frame : true,  
  6.             renderTo: Ext.getBody(),  
  7.             bodyPadding: 5,  
  8.             items:[{  
  9.                 title:'產品信息',  
  10.                 xtype : 'fieldset',  
  11.                 collapsible : true,//顯示切換展開收縮狀態的切換按鈕  
  12.                 bodyPadding: 5,  
  13.                 defaults:{//統一設置表單字段默認屬性  
  14.                     labelSeparator :'：',//分隔符  
  15.                     labelWidth : 50,//標籤寬度  
  16.                     width : 160//字段寬度  
  17.                 },  
  18.                 defaultType: 'textfield',//設置表單字段的默認類型  
  19.                 items:[{  
  20.                     fieldLabel:'產地'  
  21.                 },{  
  22.                     fieldLabel:'售價'  
  23.                 }]  
  24.             },{  
  25.                 title:'產品描述',  
  26.                 xtype : 'fieldset',  
  27.                 bodyPadding: 5,  
  28.                 checkboxToggle : true,//顯示切換展開收縮狀態的複選框  
  29.                 checkboxName : 'description',//提交數據時複選框對應的name  
  30.                 labelSeparator :'：',//分隔符  
  31.                 items:[{  
  32.                     fieldLabel:'簡介',  
  33.                     labelSeparator :'：',//分隔符  
  34.                     labelWidth : 50,//標籤寬度  
  35.                     width : 160,//字段寬度  
  36.                     xtype : 'textarea'  
  37.                 }]  
  38.             }]  
  39.         });  

Ext.form.FieldContainer示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'Ext.form.FieldContainer示例',  
  3.             width : 300,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             fieldDefaults:{//統一設置表單字段默認屬性  
  8.                 labelSeparator :'：',//分隔符  
  9.                 labelWidth : 60,//標籤寬度  
  10.                 width : 260,//字段寬度  
  11.                 msgTarget : 'side'  
  12.             },  
  13.             defaultType: 'textfield',//設置表單字段的默認類型  
  14.             items:[{  
  15.                 fieldLabel:'商品名稱'  
  16.             },{  
  17.                 xtype: 'fieldcontainer',  
  18.                 fieldLabel: '生產日期',  
  19.                 layout: {//設置容器字段佈局  
  20.                     type: 'hbox',  
  21.                     align: 'middle'//垂直居中  
  22.                 },  
  23.                 combineErrors : true,//合併展示錯誤信息  
  24.                 fieldDefaults: {  
  25.                     hideLabel: true,//隱藏字段標籤  
  26.                     allowBlank : false//設置字段值不允許爲空  
  27.                 },  
  28.                 defaultType: 'textfield',//設置表單字段的默認類型  
  29.                 items: [{  
  30.                     fieldLabel: '年',  
  31.                     flex: 1,  
  32.                     inputId : 'yearId'  
  33.                 },{  
  34.                     xtype: 'label',  
  35.                     forId : 'yearId',  
  36.                     text: '年'  
  37.                 },{  
  38.                     fieldLabel: '月',  
  39.                     flex: 1,  
  40.                     inputId : 'monthId'  
  41.                 },{  
  42.                     xtype: 'label',  
  43.                     forId : 'monthId',  
  44.                     text: '月'  
  45.                 },{  
  46.                     fieldLabel: '日',  
  47.                     flex: 1,  
  48.                     inputId : 'dayId'  
  49.                 },{  
  50.                     xtype: 'label',  
  51.                     forId : 'dayId',  
  52.                     text: '日'  
  53.                 }]  
  54.             },{  
  55.                 fieldLabel:'產地來源'  
  56.             }]  
  57.         });  

vtype示例： 
Javascript代碼  收藏代碼
  1. Ext.create('Ext.form.Panel',{  
  2.             title:'vtype示例',  
  3.             width : 300,  
  4.             frame : true,  
  5.             renderTo: Ext.getBody(),  
  6.             bodyPadding: 5,  
  7.             defaultType: 'textfield',//設置表單字段的默認類型  
  8.             fieldDefaults:{//統一設置表單字段默認屬性  
  9.                 labelSeparator :'：',//分隔符  
  10.                 labelWidth : 80,//標籤寬度  
  11.                 width : 270,//字段寬度  
  12.                 msgTarget : 'side'  
  13.             },  
  14.             items:[{  
  15.                 fieldLabel:'電子郵件',  
  16.                 vtype:'email'  
  17.             },{  
  18.                 fieldLabel:'網址',  
  19.                 vtype:'url'  
  20.             },{  
  21.                 fieldLabel:'字母',  
  22.                 vtype:'alpha'  
  23.             },{  
  24.                 fieldLabel:'字母和數字',  
  25.                 vtype:'alphanum'  
  26.             }]  
  27.         });  

自定義電話號碼驗證示例： 
Javascript代碼  收藏代碼
  1. //自定義電話號碼的vtype驗證  
  2.         Ext.apply(Ext.form.field.VTypes, {  
  3.             phone:  function(v) {  
  4.                 //規則區號（3-4位數字）-電話號碼（7-8位數字）  
  5.                 return /^(\d{3}-|\d{4}-)?(\d{8}|\d{7})$/.test(v);  
  6.             },  
  7.             phoneText: '請輸入有效的電話號碼',  
  8.             phoneMask: /[\d-]/i//只允許輸入數字和-號  
  9.         });  
  10.         Ext.QuickTips.init();  
  11.         Ext.create('Ext.form.Panel',{  
  12.             title:'自定義電話號碼驗證示例',  
  13.             width : 300,  
  14.             frame : true,  
  15.             renderTo: Ext.getBody(),  
  16.             bodyPadding: 5,  
  17.             defaultType: 'textfield',//設置表單字段的默認類型  
  18.             fieldDefaults:{//統一設置表單字段默認屬性  
  19.                 labelSeparator :'：',//分隔符  
  20.                 labelWidth : 80,//標籤寬度  
  21.                 width : 270,//字段寬度  
  22.                 msgTarget : 'side'  
  23.             },  
  24.             items:[{  
  25.                 fieldLabel:'住宅號碼',  
  26.                 vtype:'phone'//使用電話類型驗證  
  27.             },{  
  28.                 fieldLabel:'辦公號碼',  
  29.                 vtype:'phone'//使用電話類型驗證  
  30.             }]  
  31.         });  

自定義日期範圍驗證示例： 
Javascript代碼  收藏代碼
  1. //自定義VType類型，驗證日期選擇範圍  
  2.         Ext.apply(Ext.form.field.VTypes, {  
  3.             //驗證方法  
  4.             dateRange : function(val, field) {  
  5.                 var beginDate = null,//開始日期  
  6.                     beginDateCmp = null,//開始日期組件  
  7.                     endDate = null,//結束日期  
  8.                     endDateCmp = null,//結束日期組件  
  9.                     validStatus = true;//驗證狀態  
  10.                 if(field.dateRange){  
  11.                     //獲取開始時間  
  12.                     if(!Ext.isEmpty(field.dateRange.begin)){  
  13.                         beginDateCmp = Ext.getCmp(field.dateRange.begin);  
  14.                         beginDate = beginDateCmp.getValue();  
  15.                     }  
  16.                     //獲取結束時間  
  17.                     if(!Ext.isEmpty(field.dateRange.end)){  
  18.                         endDateCmp = Ext.getCmp(field.dateRange.end);  
  19.                         endDate = endDateCmp.getValue();  
  20.                     }  
  21.                 }  
  22.                 //如果開始日期或結束日期有一個爲空則校驗通過  
  23.                 if(!Ext.isEmpty(beginDate) && !Ext.isEmpty(endDate)){  
  24.                     validStatus =  beginDate <= endDate;  
  25.                 }  
  26.                   
  27.                 return validStatus;  
  28.             },  
  29.             //驗證提示信息  
  30.             dateRangeText : '開始日期不能大於結束日期，請重新選擇。'  
  31.         });  
  32.         Ext.QuickTips.init();//初始化提示;  
  33.         var dateForm = Ext.create('Ext.form.Panel',{  
  34.             title:'自定義日期範圍驗證示例',  
  35.             frame : true,  
  36.             width:250,  
  37.             renderTo: Ext.getBody(),  
  38.             bodyPadding: 5,  
  39.             fieldDefaults:{//統一設置表單字段默認屬性  
  40.                 autoFitErrors : false,//不自動調整字段寬度  
  41.                 labelSeparator :'：',//分隔符  
  42.                 labelWidth : 90,//標籤寬度  
  43.                 width : 210,//字段寬度  
  44.                 format:'Y年n月j日',//顯示日期的格式  
  45.                 editable : false,//設置只讀  
  46.                 allowBlank : false,//不允許爲空  
  47.                 msgTarget : 'side'//設置提示信息展示位置  
  48.             },  
  49.             defaultType: 'datefield',//設置表單字段的默認類型  
  50.             items:[{  
  51.                 id:'beginDate1',  
  52.                 fieldLabel:'入學開始日期',  
  53.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用於vtype類型dateRange  
  54.                 vtype:'dateRange'  
  55.             },{  
  56.                 id:'endDate1',  
  57.                 fieldLabel:'入學結束日期',  
  58.                 dateRange:{begin:'beginDate1',end:'endDate1'},//用於vtype類型dateRange  
  59.                 vtype:'dateRange'  
  60.             },{  
  61.                 id:'beginDate2',  
  62.                 fieldLabel:'畢業開始日期',  
  63.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用於vtype類型dateRange  
  64.                 vtype:'dateRange'  
  65.             },{  
  66.                 id:'endDate2',  
  67.                 fieldLabel:'畢業結束日期',  
  68.                 dateRange:{begin:'beginDate2',end:'endDate2'},//用於vtype類型dateRange  
  69.                 vtype:'dateRange'  
  70.             }]  
  71.         });  

Ajax模式的表單數據加載： 
Html代碼  收藏代碼
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>Ajax模式的表單數據加載</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化提示;  
  11.         var productForm = Ext.create('Ext.form.Panel',{  
  12.             title:'表單加載示例',  
  13.             width : 300,  
  14.             frame : true,  
  15.             fieldDefaults:{//統一設置表單字段默認屬性  
  16.                 labelSeparator :'：',//分隔符  
  17.                 labelWidth : 80,//標籤寬度  
  18.                 width : 200  
  19.             },  
  20.             renderTo: Ext.getBody(),  
  21.             items:[{  
  22.                 fieldLabel:'產品名稱',  
  23.                 xtype : 'textfield',  
  24.                 name : 'productName',  
  25.                 value:'U盤'//同步加載數據  
  26.             },{  
  27.                 fieldLabel:'金額',  
  28.                 xtype : 'numberfield',  
  29.                 name : 'price',  
  30.                 value : 100//同步加載數據  
  31.             },{  
  32.                 fieldLabel:'生產日期',  
  33.                 xtype : 'datefield',  
  34.                 format:'Y年m月d日',//顯示日期的格式  
  35.                 name : 'date',  
  36.                 value : new Date()//同步加載數據  
  37.             },{  
  38.                 xtype : 'hidden',  
  39.                 name : 'productId',  
  40.                 value:'001'//產品id  
  41.             },{  
  42.                 fieldLabel:'產品簡介',  
  43.                 name : 'introduction',  
  44.                 xtype : 'textarea'  
  45.             }],  
  46.             buttons:[{  
  47.                 text : '加載簡介',  
  48.                 handler : loadIntroduction  
  49.             }]  
  50.         });  
  51.         //表單加載數據的回調函數  
  52.         function loadIntroduction(){  
  53.             var params = productForm.getForm().getValues();  
  54.             productForm.getForm().load({  
  55.                 params : params,//傳遞參數  
  56.                 url : 'productServer.jsp',//請求的url地址  
  57.                 method:'GET',//請求方式  
  58.                 success:function(form,action){//加載成功的處理函數  
  59.                     Ext.Msg.alert('提示','產品簡介加載成功');  
  60.                 },  
  61.                 failure:function(form,action){//加載失敗的處理函數  
  62.                     Ext.Msg.alert('提示','產品簡介加載失敗<br>失敗原因：'+action.result.errorMessage);  
  63.                 }  
  64.             });  
  65.         }  
  66.     });  
  67.   </script>  
  68.  </HEAD>  
  69.  <BODY STYLE="margin: 10px"></BODY>  
  70. </HTML>  
Jsp代碼  收藏代碼
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3. //獲取產品id  
  4. String productId = request.getParameter("productId");  
  5. if("001".equals(productId)){  
  6.     String msg = "{success:true,data:{introduction:'本產品美觀實用，售後服務優秀。'}}";  
  7.     response.getWriter().write(msg);  
  8. }else{  
  9.     String msg = "{success:false,errorMessage:'數據不存在'}";  
  10.     response.getWriter().write(msg);  
  11. }  
  12. %>  


另外一種方式： 
Java代碼  收藏代碼
  1. public String getProductInfo(String productId)  
  2.     {  
  3.         String msg = "";  
  4.         if("001".equals(productId)){  
  5.             msg = "1本產品美觀實用，售後服務優秀。";  
  6.         }else{  
  7.             msg = "0數據不存在";  
  8.         }  
  9.         return msg;  
  10.     }  

Javascript代碼  收藏代碼
  1. //表單加載數據的回調函數  
  2.         function loadIntroduction(){  
  3.             var params = productForm.getForm().getValues();  
  4.             testdwr.getProductInfo(params.productId,function(ret){  
  5.                 if(ret.substring(0,1) == '1')  
  6.                 {  
  7.                     Ext.getCmp('introduction').setValue(ret.substring(1,ret.length-1));  
  8.                     Ext.Msg.alert('提示','產品簡介加載成功');  
  9.                 }  
  10.                 else  
  11.                 {  
  12.                     Ext.Msg.alert('提示','產品簡介加載失敗<br>失敗原因：'+ret.substring(1,ret.length-1));  
  13.                 }  
  14.             });  
  15.         }  

登錄簡單處理： 
Html代碼  收藏代碼
  1. <HTML>  
  2.  <HEAD>  
  3.   <TITLE>Ajax模式的表單數據提交</TITLE>  
  4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
  6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
  7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
  8.   <script type="text/javascript">  
  9.     Ext.onReady(function(){  
  10.         Ext.QuickTips.init();//初始化提示;  
  11.         var loginForm = Ext.create('Ext.form.Panel',{  
  12.             title:'表單提交示例',  
  13.             width : 230,  
  14.             frame : true,  
  15.             fieldDefaults:{//統一設置表單字段默認屬性  
  16.                 labelSeparator :'：',//分隔符  
  17.                 labelWidth : 50,//標籤寬度  
  18.                 msgTarget : 'side',  
  19.                 width : 200  
  20.             },  
  21.             renderTo: Ext.getBody(),  
  22.             bodyPadding: 5,  
  23.             defaultType: 'textfield',//設置表單字段的默認類型  
  24.             items:[{  
  25.                 fieldLabel:'用戶名',  
  26.                 name : 'userName',  
  27.                 allowBlank : false,  
  28.                 vtype:'email'  
  29.             },{  
  30.                 fieldLabel:'密碼',  
  31.                 name : 'password',  
  32.                 inputType : 'password',  
  33.                 allowBlank : false  
  34.             }],  
  35.             buttons:[{  
  36.                 text : '登陸',  
  37.                 handler : login  
  38.             },{  
  39.                 text : '重置',  
  40.                 handler : reset  
  41.             }]  
  42.         });  
  43.         function login(){//提交表單  
  44.             loginForm.getForm().submit({  
  45.                 clientValidation:true,//進行客戶端驗證  
  46.                 url : 'loginServer.jsp',//請求的url地址  
  47.                 method:'GET',//請求方式  
  48.                 success:function(form,action){//加載成功的處理函數  
  49.                     Ext.Msg.alert('提示','系統登陸成功');  
  50.                 },  
  51.                 failure:function(form,action){//加載失敗的處理函數  
  52.                     Ext.Msg.alert('提示','系統登陸失敗，原因：'+action.failureType);  
  53.                 }  
  54.             });  
  55.         }  
  56.         function reset(){//重置表單  
  57.             loginForm.form.reset();  
  58.         }  
  59.     });  
  60.   </script>  
  61.  </HEAD>  
  62.  <BODY  STYLE="margin: 10px"></BODY>  
  63. </HTML>  
Jsp代碼  收藏代碼
  1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
  2. <%  
  3.     String password = request.getParameter("password");  
  4.     String msg = "";  
  5.     if(password.length() < 6){//密碼不足6位驗證失敗  
  6.         msg = "{success:false,errors:{password:'密碼不得小於六位數字'}}";  
  7.     }else{//驗證成功  
  8.         msg = "{success:true}";  
  9.     }  
  10.     response.getWriter().write(msg);  
  11. %>  
站內首發文章
yyhm
發佈了8 篇原創文章 · 獲贊 18 · 訪問量 47萬+
私信 關注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

「實戰應用」如何用DHTMLX將上下文菜單集成到JavaScript甘特圖中（一）

DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。 DHTMLX Gantt是一個高度可定製的工具，可以與項目管理應用程序所需的其他功能相補充。在本文

原創 2024-06-14 12:16:49

使用TypeScript創建高效HTTP代理請求

什麼是HTTP代理請求？ 首先，讓我們來了解一下什麼是HTTP代理請求。在網絡通信中，代理是一種充當中間人的服務器，它可以接收客戶端的請求並將其轉發給目標服務器，然後將目標服務器的響應返回給客戶端。而HTTP代理則是一種特殊的代理服務

原創 2024-06-13 00:05:09

Puppeteer實戰案例：自動化抓取社交媒體上的媒體資源

在當今數字化時代，社交媒體已成爲人們獲取信息、分享生活和進行商業推廣的重要平臺。隨着社交媒體內容的爆炸性增長，自動化抓取社交媒體上的媒體資源變得尤爲重要。本文將介紹如何使用Puppeteer這一強大的自動化工具來實現這一目標。 1. P

原創 2024-06-08 00:06:14

交互式流程圖組件DHTMLX Diagram v6.0 - 擁有更靈活的高度可定製功能

DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖，通過自動佈局和實時編輯器，它可以更容易地將複雜數據可視化到一個整潔的層次結構中。 DHTMLX Diagram v6.0版本發佈，帶來了衆多令人興奮的新功能和改進，

原創 2024-06-04 12:32:11

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:28

Symfony Panther在網絡數據採集中的應用

引言 在當今數字化時代，網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther，作爲Symfony生態系統中的一個強大工具，爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲，實現網絡數據的採集和自動化操作。本文將通過

原創 2024-06-04 02:45:12

界面控件DevExtreme v23.2 - 可訪問性、性能增強

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-06-03 12:21:39

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合*使您可以利用現代Web開發堆棧*包括React*Angular*ASP.NET Core*jQuery*Knockout等*構建交互式的Web應用程序。從Ang

原創 2024-05-31 12:32:20

網頁爬蟲開發：使用Scala和PhantomJS訪問知乎

引言 隨着大數據時代的到來，網頁爬蟲作爲一種高效的數據收集工具，被廣泛應用於互聯網數據抓取和信息抽取。而知乎是一個知識分享平臺，擁有大量的用戶生成內容。通過爬蟲獲取知乎數據，企業和研究人員可以進行深入的數據分析和市場研究，瞭解用戶的需求

原創 2024-05-31 00:11:23

「盤點」JetBrains IDEs v2024.1新功能一覽，更智能的開發體驗！

JetBrains IDEs日前正式發佈了v2024.1版本，此版本中最大的亮點就是帶來了AI賦能的全行代碼補全，同時在最新的IDEs中重做了終端、擁有更強大的代碼編輯和導航功能、更智能的代碼分析和提示、更優化的性能、更豐富的插件和集成等。

原創 2024-05-29 12:18:44

Objective-C爬蟲：實現動態網頁內容的抓取

在當今的互聯網時代，數據的獲取和分析變得日益重要。無論是進行市場研究、用戶行爲分析還是產品開發，獲取大量數據都是不可或缺的一環。然而，很多有價值的信息都隱藏在動態加載的網頁中，這些網頁通過JavaScript動態生成內容，傳統的爬蟲技術

原創 2024-05-29 00:07:51

音頻鏈接抓取技術在Lua中的實現

前言 隨着數字音樂的普及，越來越多的用戶選擇在線音樂平臺來享受音樂。網易雲音樂作爲國內領先的音樂服務平臺，不僅提供了豐富的音樂資源，還擁有獨特的社交屬性，吸引了大量的用戶。在衆多的音樂服務中，音頻鏈接的抓取技術成爲了一個重要的需求。無論

原創 2024-05-28 00:07:25

今天！通義靈碼在北京、成都、杭州三城開講啦

通義靈碼自從入職阿里雲以來備受行業關注。5 月 24 日，阿里雲工程師奔赴北京、成都、杭州三城，向企業和開發者介紹並演示通義靈碼，通義靈碼依然是大家話題的C位，並收穫了衆多粉絲。 @杭州 阿里雲金融創新峯會 今天，2024 阿里雲金融創新峯

原創 2024-05-27 21:13:46

響應式UI組件DevExtreme中文教程 - 工具欄的自適應模式

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-27 12:19:43

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（三）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-05-27 12:19:39