碼上歡樂
相關內容    簡體    繁體

extjs表單驗證

本文轉載自   查看原文   2013-09-03 15:35   16112    ExtJS
  1. extjs表單驗證  
  2. //放在onReady的function（）{}中  
  3. Ext.QuickTips.init(); //為組件提供提示信息功能，form的主要提示信息就是客戶端驗證的錯誤信息。  
  4. Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚舉值為  
  5.     qtip-當鼠標移動到控件上面時顯示提示  
  6.     title-在瀏覽器的標題顯示，但是測試結果是和qtip一樣的  
  7.     under-在控件的底下顯示錯誤提示  
  8.     side-在控件右邊顯示一個錯誤圖標，鼠標指向圖標時顯示錯誤提示. 默認值.  
  9.     id-[element id]錯誤提示顯示在指定id的HTML元件中  
  10. 1.一個最簡單的例子：空驗證  
  11.     //空驗證的兩個參數  
  12.     1.allowBlank:false//false則不能為空，默認為true  
  13.     2.blankText:string//當為空時的錯誤提示信息  
  14.     js代碼為：  
  15.     var form1 = new Ext.form.FormPanel({  
  16.         width       : 350,  
  17.         renderTo    : "form1",  
  18.         title       : "FormPanel",  
  19.         defaults    : {xtype:"textfield",inputType:"password"},  
  20.         items       : [{  
  21.                 id          : "blanktest",  
  22.                 fieldLabel  : "不能為空",  
  23.                 allowBlank  : false,//不允許為空  
  24.                 blankText   : "不能為空"//錯誤提示信息，默認為This field is required!  
  25.         }]  
  26.     });  
  27. 2.用vtype格式進行簡單的驗證。  
  28. 在此舉郵件驗證的例子，重寫上面代碼的items配置:  
  29.     items:[{  
  30.         fieldLabel  : "不能為空",  
  31.         vtype       : "email",//email格式驗證  
  32.         vtypeText   : "不是有效的郵箱地址",//錯誤提示信息,默認值我就不說了  
  33.         id          : "blanktest",  
  34.         anchor      : "90%"  
  35.     }  
  36. 你可以修改上面的vtype為以下的幾種extjs的vtype默認支持的驗證：  
  37. //form驗證中vtype的默認支持類型  
  38. 1.alpha     //只能輸入字母，無法輸入其他（如數字，特殊符號等）  
  39. 2.alphanum  //只能輸入字母和數字，無法輸入其他  
  40. 3.email     //email驗證，要求的格式是"langsin@gmail.com"  
  41. 4.url       //url格式驗證，要求的格式是[url]
  42.   
  43. 3.高級自定義密碼驗證  
  44. 前面的驗證都是extjs已經提供的，我們也可以自定義驗證函數。  
  45. //先用Ext.apply方法添加自定義的password驗證函數（也可以取其他的名字）  
  46. Ext.apply(Ext.form.VTypes,{  
  47.     password:function(val,field){               //val指這里的文本框值，field指這個文本框組件，大家要明白這個意思  
  48.         if(field.confirmTo){                    //confirmTo是我們自定義的配置參數，一般用來保存另外的組件的id值  
  49.             var pwd=Ext.get(field.confirmTo);   //取得confirmTo的那個id的值  
  50.             return (val==pwd.getValue());  
  51.         }  
  52.         return true;  
  53.     }  
  54. });  
  55. //配置items參數  
  56. items:[  
  57.     {  
  58.         fieldLabel  : "密碼",  
  59.         id          : "pass1",  
  60.     },{  
  61.         fieldLabel  : "確認密碼",  
  62.         id          : "pass2",  
  63.         vtype       : "password",//自定義的驗證類型  
  64.         vtypeText   : "兩次密碼不一致！",  
  65.         confirmTo   : "pass1",//要比較的另外一個的組件的id  
  66.     }  
  67. ]  
  68. 4.使用正則表達式驗證  
  69. new Ext.form.TextField({  
  70.     fieldLabel  : "姓名",  
  71.     name        : "author_nam",  
  72.     regex       : /[/u4e00-/u9fa5]/,    //正則表達式在/...../之間. [/u4e00-/u9fa5] : 只能輸入中文.  
  73.     regexText   : "只能輸入中文!",  
  74.     allowBlank  : false                 //此驗證依然有效.不許為空.  

 

[javascript]   view plain copy
  1. Ext.apply(Ext.form.VTypes,     
  2. {    
  3.     daterange: function(val, field)     
  4.     {    
  5.         var date = field.parseDate(val);    
  6.         
  7.         // We need to force the picker to update values to recaluate the disabled dates display    
  8.         var dispUpd = function(picker)     
  9.         {    
  10.             var ad = picker.activeDate;    
  11.             picker.activeDate = null;    
  12.             picker.update(ad);    
  13.         };    
  14.         
  15.         if (field.startDateField)     
  16.         {    
  17.             var sd = Ext.getCmp(field.startDateField);    
  18.             sd.maxValue = date;    
  19.             if (sd.menu && sd.menu.picker)     
  20.             {    
  21.                 sd.menu.picker.maxDate = date;    
  22.                 dispUpd(sd.menu.picker);    
  23.             }    
  24.         }     
  25.         else if (field.endDateField)     
  26.         {    
  27.             var ed = Ext.getCmp(field.endDateField);    
  28.             ed.minValue = date;    
  29.             if (ed.menu && ed.menu.picker)     
  30.             {    
  31.                 ed.menu.picker.minDate = date;    
  32.                 dispUpd(ed.menu.picker);    
  33.             }    
  34.         }    
  35.         return true;    
  36.     },    
  37.       
  38.   password: function(val, field)     
  39.   {    
  40.         if (field.initialPassField)     
  41.         {    
  42.             var pwd = Ext.getCmp(field.initialPassField);    
  43.             return (val == pwd.getValue());     
  44.         }    
  45.         return true;    
  46.   },    
  47.   passwordText: '兩次輸入的密碼不一致！',    
  48.       
  49.   chinese:function(val,field)    
  50.   {    
  51.         var reg = /^[/u4e00-/u9fa5]+$/i;    
  52.         if(!reg.test(val))    
  53.         {    
  54.             return false;    
  55.         }    
  56.         return true;    
  57.   },    
  58.   chineseText:'請輸入中文',    
  59.       
  60.   age:function(val,field)    
  61.   {    
  62.         try    
  63.         {    
  64.             if(parseInt(val) >= 18 && parseInt(val) <= 100)    
  65.                 return true;    
  66.             return false;    
  67.         }    
  68.         catch(err)     
  69.         {    
  70.             return false;    
  71.         }    
  72.   },    
  73.   ageText:'年齡輸入有誤',    
  74.       
  75.   alphanum:function(val,field)    
  76.   {    
  77.         try    
  78.         {    
  79.             if(!//W/.test(val))    
  80.                 return true;    
  81.             return false;    
  82.         }    
  83.         catch(e)    
  84.         {    
  85.             return false;    
  86.         }    
  87.   },    
  88.   alphanumText:'請輸入英文字母或是數字,其它字符是不允許的.',    
  89.       
  90.   url:function(val,field)    
  91.   {    
  92.         try    
  93.         {    
  94.             if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))    
  95.                 return true;    
  96.             return false;    
  97.         }    
  98.         catch(e)    
  99.         {    
  100.             return false;    
  101.         }    
  102.   },    
  103.   urlText:'請輸入有效的URL地址.',    
  104.       
  105.   max:function(val,field)    
  106.   {    
  107.         try    
  108.         {    
  109.             if(parseFloat(val) <= parseFloat(field.max))    
  110.                 return true;    
  111.             return false;    
  112.         }    
  113.         catch(e)    
  114.         {    
  115.             return false;    
  116.         }    
  117.   },    
  118.   maxText:'超過最大值',    
  119.       
  120.   min:function(val,field)    
  121.   {    
  122.         try    
  123.         {    
  124.             if(parseFloat(val) >= parseFloat(field.min))    
  125.                 return true;    
  126.             return false;    
  127.         }    
  128.         catch(e)    
  129.         {    
  130.             return false;    
  131.         }    
  132.   },    
  133.   minText:'小於最小值',    
  134.           
  135.   datecn:function(val,field)    
  136.   {    
  137.         try    
  138.         {    
  139.             var regex = /^(/d{4})-(/d{2})-(/d{2})$/;    
  140.             if(!regex.test(val)) return false;    
  141.             var d = new Date(val.replace(regex, '$1/$2/$3'));    
  142.             return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());    
  143.         }    
  144.         catch(e)    
  145.         {    
  146.             return false;    
  147.         }    
  148.   },    
  149.   datecnText:'請使用這樣的日期格式: yyyy-mm-dd. 例如:2008-06-20.',    
  150.       
  151.   integer:function(val,field)    
  152.   {    
  153.         try    
  154.         {    
  155.             if(/^[-+]?[/d]+$/.test(val))    
  156.                 return true;    
  157.             return false;    
  158.         }    
  159.         catch(e)    
  160.         {    
  161.             return false;    
  162.         }    
  163.   },    
  164.   integerText:'請輸入正確的整數',    
  165.       
  166.   minlength:function(val,field)    
  167.   {    
  168.         try    
  169.         {    
  170.             if(val.length >= parseInt(field.minlen))    
  171.                 return true;    
  172.             return false    
  173.         }    
  174.         catch(e)    
  175.         {    
  176.             return false;    
  177.         }    
  178.   },    
  179.   minlengthText:'長度過小',    
  180.       
  181.   maxlength:function(val,field)    
  182.   {    
  183.      try    
  184.      {    
  185.         if(val.length <= parseInt(field.maxlen))    
  186.             return true;    
  187.         return false;    
  188.      }    
  189.      catch(e)    
  190.      {    
  191.         return false;    
  192.      }    
  193.   },    
  194.   maxlengthText:'長度過大',    
  195.       
  196.   ip:function(val,field)    
  197.   {    
  198.         try    
  199.         {    
  200.             if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))    
  201.                 return true;    
  202.             return false;    
  203.         }    
  204.         catch(e)    
  205.         {    
  206.             return false;    
  207.         }    
  208.   },    
  209.   ipText:'請輸入正確的IP地址',    
  210.       
  211.   phone:function(val,field)    
  212.   {    
  213.         try    
  214.         {    
  215.             if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))    
  216.                 return true;    
  217.             return false;    
  218.         }    
  219.         catch(e)    
  220.         {    
  221.             return false;    
  222.         }    
  223.   },    
  224.   phoneText:'請輸入正確的電話號碼,如:0920-29392929',    
  225.       
  226.   mobilephone:function(val,field)    
  227.   {    
  228.         try    
  229.         {    
  230.             if(/(^0?[1][35][0-9]{9}$)/.test(val))    
  231.                 return true;    
  232.             return false;    
  233.         }    
  234.         catch(e)    
  235.         {    
  236.             return false;    
  237.         }    
  238.   },    
  239.   mobilephoneText:'請輸入正確的手機號碼',    
  240.       
  241.   alpha:function(val,field)    
  242.   {    
  243.         try    
  244.         {    
  245.             if( /^[a-zA-Z]+$/.test(val))    
  246.                 return true;    
  247.             return false;    
  248.         }    
  249.         catch(e)    
  250.         {    
  251.             return false;    
  252.         }    
  253.   },    
  254.   alphaText:'請輸入英文字母'    
  255. });    

 

 

 

 

 

 

 

 

 

 

 

 

另外一種方式擴展一些VType，基本上是用正在表達式的，方便做驗證了。

 

：

 

[javascript] view plain copy
  1. Ext.form.VTypes["hostnameVal1"] = /^[a-zA-Z][-.a-zA-Z0-9]{0,254}$/;  
  2. Ext.form.VTypes["hostnameVal2"] = /^[a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}([.][a-zA-Z]([-a-zA-Z0-9]{0,61}[a-zA-Z0-9]){0,1}){0,}$/;  
  3. Ext.form.VTypes["ipVal"] = /^([1-9][0-9]{0,1}|1[013-9][0-9]|12[0-689]|2[01][0-9]|22[0-3])([.]([1-9]{0,1}[0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2}[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-4])$/;  
  4. Ext.form.VTypes["netmaskVal"] = /^(128|192|224|24[08]|25[245].0.0.0)|(255.(0|128|192|224|24[08]|25[245]).0.0)|(255.255.(0|128|192|224|24[08]|25[245]).0)|(255.255.255.(0|128|192|224|24[08]|252))$/;  
  5. Ext.form.VTypes["portVal"] = /^(0|[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/;  
  6. Ext.form.VTypes["multicastVal"] = /^((22[5-9]|23[0-9])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){3})|(224[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])){2})|(224[.]0[.]([1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])([.](0|[1-9][0-9]{0,1}|1[0-9]{2}|2[0-4][0-9]|25[0-5])))$/;  
  7. Ext.form.VTypes["usernameVal"] = /^[a-zA-Z][-_.a-zA-Z0-9]{0,30}$/;  
  8. Ext.form.VTypes["passwordVal1"] = /^.{6,31}$/;  
  9. Ext.form.VTypes["passwordVal2"] = /[^a-zA-Z].*[^a-zA-Z]/;  
  10. Ext.form.VTypes["hostname"]=function(v){  
  11.  if(!Ext.form.VTypes["hostnameVal1"].test(v)){  
  12.   Ext.form.VTypes["hostnameText"]="Must begin with a letter and not exceed 255 characters"  
  13.   return false;  
  14.  }  
  15.  Ext.form.VTypes["hostnameText"]="L[.L][.L][.L][...] where L begins with a letter, ends with a letter or number, and does not exceed 63 characters";  
  16.  return Ext.form.VTypes["hostnameVal2"].test(v);  
  17. }  
  18. Ext.form.VTypes["hostnameText"]="Invalid Hostname"  
  19. Ext.form.VTypes["hostnameMask"]=/[-.a-zA-Z0-9]/;  
  20. Ext.form.VTypes["ip"]=function(v){  
  21.  return Ext.form.VTypes["ipVal"].test(v);  
  22. }  
  23. Ext.form.VTypes["ipText"]="1.0.0.1 - 223.255.255.254 excluding 127.x.x.x"  
  24. Ext.form.VTypes["ipMask"]=/[.0-9]/;  
  25. Ext.form.VTypes["netmask"]=function(v){  
  26.  return Ext.form.VTypes["netmaskVal"].test(v);  
  27. }  
  28. Ext.form.VTypes["netmaskText"]="128.0.0.0 - 255.255.255.252"  
  29. Ext.form.VTypes["netmaskMask"]=/[.0-9]/;  
  30. Ext.form.VTypes["port"]=function(v){  
  31.  return Ext.form.VTypes["portVal"].test(v);  
  32. }  
  33. Ext.form.VTypes["portText"]="0 - 65535"  
  34. Ext.form.VTypes["portMask"]=/[0-9]/;  
  35. Ext.form.VTypes["multicast"]=function(v){  
  36.  return Ext.form.VTypes["multicastVal"].test(v);  
  37. }  
  38. Ext.form.VTypes["multicastText"]="224.0.1.0 - 239.255.255.255"  
  39. Ext.form.VTypes["multicastMask"]=/[.0-9]/;  
  40. Ext.form.VTypes["username"]=function(v){  
  41.  return Ext.form.VTypes["usernameVal"].test(v);  
  42. }  
  43. Ext.form.VTypes["usernameText"]="Username must begin with a letter and cannot exceed 255 characters"  
  44. Ext.form.VTypes["usernameMask"]=/[-_.a-zA-Z0-9]/;  
  45. Ext.form.VTypes["password"]=function(v){  
  46.  if(!Ext.form.VTypes["passwordVal1"].test(v)){  
  47.   Ext.form.VTypes["passwordText"]="Password length must be 6 to 31 characters long";  
  48.   return false;  
  49.  }  
  50.  Ext.form.VTypes["passwordText"]="Password must include atleast 2 numbers or symbols";  
  51.  return Ext.form.VTypes["passwordVal2"].test(v);  
  52. }  
  53. Ext.form.VTypes["passwordText"]="Invalid Password"  
  54. Ext.form.VTypes["passwordMask"]=/./;  

 

 

 

 

 

 

 

 

 

 

 

 

另外寫一下Extjs form 組件

 

1、Ext.form.Action
     配置項：           success：執行成功后回調的函數，包括兩個參數：form和action           failure：執行失敗后回調的函數，包括兩個參數：form和action           method：表單的提交方式，有效值包括GET、POST           params：傳遞到請求中的參數           url：動作提交的路徑           waitMsg：動作執行時顯示的等待信息      屬性：           Action.CLIENT_INVALID：客戶端驗證錯誤           Action.CONNECT_FAILURE：通信錯誤           Action.LOAD_FAILURE：加載數據時，沒有包含data屬性的字段被返回           Action.SERVER_INVALID：服務端驗證錯誤           failureType：錯誤類型           result：包含布爾類型的success屬性和其他屬性，如{success: true, msg: 'ok'}           type：動作類型，可選值有submit和load                Ext.form.Action.Submit：返回的信息中要包含一個布爾類型的success屬性和一個可選的errors屬性                Ext.form.Action.Load：返回的信息中要包含一個布爾類型的success屬性和一個data屬性
2、Ext.form.BasicForm
     配置項：           baseParams：傳遞到請求中的參數           method：表單的提交方式，有效值包括GET、POST           url：表單默認的提交路徑           fileUpload：表單是否進行文件上傳           timeout：表單動作的超時時間，默認為30秒           trackResetOnLoad：是否在表單初次創建時清楚數據     方法：           doAction( String/Object actionName, [Object options] )：執行一個預訂的動作，可用選項包括：               url：動作提交的路徑               method：表單的提交方式，有效值包括GET、POST               params：傳遞到請求中的參數               headers：               success：執行成功后回調的函數，包括兩個參數：form和action               failure：執行失敗后回調的函數，包括兩個參數：form和action               clientValidation：是否客戶端驗證           clearInvalid()：清除表單中所有的無效驗證信息           findField( String id )：查找表單字段           getValues( [Boolean asString] )：           isDirty()：表單數據是否被更改過           isValid()：客戶端驗證是否成功           load( Object options )：執行表單讀取動作           loadRecord( Record record )：從一個數據記錄中讀取數據到表單中           markInvalid( Array/Object errors )：成批設置表單字段為驗證無效           reset()：重置表單           setValues( Array/Object values )：成批設置表單字段值           submit( Object options )：執行表單提交動作           updateRecord( Record record )：持久化表單數據到記錄集中
3、Ext.form.FormPanel
     配置項：           items：一個元素或元素數組           buttons：一個按鈕配置對象的數組，按鈕將被添加到表單頁腳中           buttonAlign：按鈕的對齊方式，可選值有left、center、right，默認為center           labelWidth：表單標簽的寬度           labelAlign：表單標簽的對齊方式，可選值有left、top、right，默認為left           labelSeparator：字段標簽與字段之間的分隔符，默認為':'           minButtonWidth：按鈕的最小寬度，默認為75      方法：           getForm() : Ext.form.BasicForm           load( Object options )           startMonitoring()           stopMonitoring()
4、Ext.form.Field
    配置項：           name：字段名           value：字段的初始化值           disabled：字段是否不可用，默認為false           fieldLabel：字段標簽說明           hideLabel：隱藏字段標簽，默認為false           labelSeparator：字段標簽與字段之間的分隔符，默認為':'           labelStyle：字段標簽樣式           inputType：默認為text           invalidClass：默認為x-form-invalid           invalidText：字段非法文本提示           msgTarget：錯誤信息顯示的位置，默認為qtip               qtip：顯示一個浮動的提示信息               title：顯示一個瀏覽器的浮動提示信息               under：在字段下方顯示一個提示信息               side：在字段右邊顯示一個提示信息           readOnly：字段是否只讀，默認為false           validateOnBlur：字段在失去焦點時被驗證，默認為true      方法：           clearInvalid()：           getRawValue()           setRawValue( Mixed value )           getValue()           setValue( Mixed value )           isDirty()：字段值在裝載后是否被修改過           isValid( Boolean preventMark )：當前字段值是否合法           markInvalid( [String msg] )           validate()           reset()
5、Ext.form.Hidden
6、Ext.form.Label
     配置項：
          html：
          text：
7、Ext.form.TextField
     配置項：           allowBlank：是否允許為空，默認為true           blankText：空驗證失敗后顯示的提示信息           emptyText：在一個空字段中默認顯示的信息           grow：字段是否自動伸展和收縮，默認為false           growMin：收縮的最小寬度           growMax：伸展的最大寬度           inputType：字段類型：默認為text           maskRe：用於過濾不匹配字符輸入的正則表達式           maxLength：字段允許輸入的最大長度           maxLengthText：最大長度驗證失敗后顯示的提示信息           minLength：字段允許輸入的最小長度           minLengthText：最小長度驗證失敗后顯示的提示信息           regex：正則表達式           regexText：正則表達式驗證失敗后顯示的提示信息           vtype：驗證類型的名字                alpha：限制只能輸入字母                alphanum：限制只能輸入字母和數字                email                url           vtypeText：驗證失敗時的提示信息           validator：自定義驗證函數           selectOnFocus：當字段得到焦點時自動選擇已存在的文本，默認為false
8、Ext.form.TextArea       配置項：            preventScrollbars：是否禁止出現滾動條，默認為false
9、Ext.form.NumberField       配置項：            allowDecimals：是否允許輸入小數，默認為true            allowNegative：是否允許輸入負數，默認為true            baseChars：輸入的有效數字集合，默認為'0123456789'            decimalPrecision：數字的精度，默認保留小數點后2位            decimalSeparator：十進制分隔符，默認為'.'            maxValue：允許輸入的最大數值            maxText：超過最大值之后的提示信息            minValue：允許輸入的最小數值            minText：超過最小值之后的提示信息            nanText：輸入非有效數值之后的提示信息
10、Ext.form.Checkbox       配置項：            boxLabel：復選框的文字描述            checked：復選框是否被選擇，默認為false            handler：當checked值改變時觸發的函數，函數包含兩個參數：checkbox、checked            inputValue：      方法：            getValue()：返回復選框的checked狀態            setValue( Boolean/String checked )：
11、Ext.form.CheckboxGroup      配置項：            allowBlank：是否允許不選擇，默認為true            blankText：            columns：顯示的列數，可選值包括：固定值auto、數值、數組（整數、小數）            items：對象數組            vertical：是否垂直方向顯示對象，默認為false
12、Ext.form.Radio      方法：            getGroupValue()：            setValue( value {String/Boolean} )：
13、Ext.form.RadioGroup      配置項：            allowBlank：            blankText：
14、Ext.form.ComboBox       配置項：            displayField：被顯示在下拉框中的字段名            editable：是否可編輯，默認為true            forceSelection：輸入值是否嚴格為待選列表中存在的值。如果輸入不存在的值，會自動選擇第一個最接近的值。            hiddenName：隱藏字段的名字，如果提供該參數則一個隱藏字段將被創建，用來存儲所選值，當表單提交時在服務器端可以通過該名字取得列表中的所選值            listWidth：下拉列表的寬度            minListWidth：下拉列表的最小寬度，默認為70像素            loadingText：當下拉框加載數據時顯示的提示信息，只有當mode='remote'時才會生效            maxHeight：下拉列表框的最大高度，默認為300像素            minChars：下拉列表框自動選擇前用戶需要輸入的最小字符數量。mode='remote'默認為4，mode='local'默認為0            mode：下拉列表框的數據讀取模式。remote讀取遠程數據，local讀取本地數據            pageSize：下拉列表框的分頁大小。該項設置只在mode='remote'時生效            queryParam：查詢的名字，默認為'query'，將被傳遞到查詢字符串中            allQuery：一個發往服務器用來查詢全部信息的查詢字符串，默認為空字符串''            selectOnFocus：當獲得焦點時立刻選擇一個已存在的列表項。默認為false，此項只有在editable=true時才會生效            store：列表框綁定的數據源            transform：將頁面中已存在的元素轉換為組合框            lazyInit：延時初始化下拉列表，默認為true            lazyRender：延時渲染，默認為false            triggerAction：設置單擊觸發按鈕時執行的默認操作，有效值包括all和query，默認為query，如果設置為all則會執行allQuery中設置的查詢            typeAhead：設置在輸入過程中是否自動選擇匹配的剩余部分文本（選擇第一個滿足條件的），默認為false            value：初始化組合框中的值            valueField：組合框的值字段            valueNotFoundText：值不存在時的提示信息            tpl：Ext模板字符串或模板對象，可以通過該配置項自定義下拉列表的顯示方式
     方法：            clearValue()：清空字段當前值            doQuery( String query, Boolean forceAll )：            getValue()：            getStore()：            setValue( String value )：
15、Ext.form.DateField      配置項：            maxValue：允許選擇的最大日期            maxText：當日期大於最大值時的錯誤提示信息            minValue：允許選擇的最小時間            minText：當日期小於最小值時的錯誤提示信息            format：日期顯示格式，默認為“m/d/y”，一般使用“Y-m-d”                Y：四位年份                m：帶前綴0的月份                d：帶前綴0的日期                y：兩位年份                n：不帶前綴0的月份                j：不帶前綴0的日期                w：星期的數字，0表示星期日，1代表星期一            showToday：是否顯示今天按鈕，默認為true            altFormats：多個日期輸入格式組成的字符串，不同的格式之間使用“|”進行分割，默認值為'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'            disabledDates：禁止選擇的日期組成的數組            disabledDatesText：選擇禁選日期時顯示的提示信息            disabledDays：禁止選擇的星期組成的數組，0代表星期日，1代表星期一            disabledDaysText：選擇禁選星期時顯示的提示信息            invalidText：當日期值非法時顯示的提示信息      方法：            getValue()：取得日期值
16、Ext.form.FieldSet       配置項：            animCollapse：動畫折疊，默認為false            checkboxToggle：設置是否顯示字段集的checkbox選擇框，默認為false            checkboxName：指定字段集中用於展開或隱藏字段集面板的checkbox的名字，該屬性只有在checkboxToggle為true時生效            labelWidth：字段標簽的寬度，可以級聯到子容器            layout：布局，默認為form
17、Ext.form.TimeField       配置項：            maxValue：列表中允許的最大時間            maxText：當時間大於最大值時的錯誤提示信息            minValue：列表中允許的最小時間            minText：當時間小於最小值時的錯誤提示信息            increment：兩個相鄰選項間的時間間隔，默認為15分鍾            format：顯示格式，默認為“g:i A”。一般使用“H:i:s”                 H：帶前綴0的24小時                 i：帶前綴0的分鍾                 s：帶前綴0的秒            invalidText：當時間值非法時顯示的提示信息            altFormats：多個時間輸入格式組成的字符串，不同的格式之間使用“|”進行分割

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ExtJs 表單驗證的方法總結 Extjs之表單提交 Extjs form 表單的 submit ExtJs4表單textfield中的驗證使用以及自定義的vtype的使用 EXTJS 密碼確認與驗證 Extjs4——表單與輸入控件 表單驗證 ExtJs 確認密碼驗證的實現 基於Extjs的web表單設計器 Extjs表格樣式表單制作
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM