使用Ext Form自动绑定Html中的Form元素(转录)


 

Java代码

  1. //把ext 对象绑定在Html Form元素时的ext属性中   

  2. Ext.override(Ext.Component, {   

  3. initComponent :function(){   

  4.   this.on('render', function(){   

  5.    if(this.el)   

  6.      Ext.getDom(this.el).ext = this;   

  7.    if(this.hiddenField)//Combo   

  8.      Ext.getDom(this.hiddenField).ext = this;   

  9.    })   

  10. }   

  11. });     

  12. ­   

  13. //获取验证信息   

  14. // 将EXT的验证属性写成JSONString格式,保护在val属性中   

  15. $getValid = function(el){   

  16. var valid = "{}";   

  17.     if(Ext.getDom(el).attributes['val'])   

  18.       valid = Ext.getDom(el).attributes['val'].nodeValue;   

  19.     return valid;   

  20. }   

  21. //自动绑定Html中的Form元素   

  22. $blindFormField = function(){   

  23. var objArray = Ext.DomQuery.select("input[type=submit]");      

  24.      Ext.each(objArray, function(obj) {   

  25.          var btn = new Ext.Button({      

  26.              text : obj.value,      

  27.              applyTo : obj,      

  28.              handler : obj.onclick,      

  29.              type : obj.type      

  30.          });      

  31.          btn.getEl().replace(Ext.get(obj));      

  32.      });      

  33.      var objArray = Ext.DomQuery.select("input[type=reset]");      

  34.      Ext.each(objArray, function(obj) {      

  35.          var btn = new Ext.Button({      

  36.              text : obj.value,      

  37.              applyTo : obj,      

  38.              handler : obj.onclick,      

  39.              type : obj.type      

  40.          });      

  41.          btn.getEl().replace(Ext.get(obj));      

  42.      });      

  43.      var objArray = Ext.DomQuery.select("input[type=button]");      

  44.      Ext.each(objArray, function(obj) {      

  45.          var btn = new Ext.Button({      

  46.              text : obj.value,      

  47.              applyTo : obj,      

  48.              handler : obj.onclick,      

  49.              type : obj.type      

  50.          });      

  51.          btn.getEl().replace(Ext.get(obj));      

  52.      });      

  53.           

  54.      var objArray = Ext.DomQuery.select("input[type=text]");      

  55.      Ext.each(objArray, function(obj) {   

  56.      if(Ext.getDom(obj).ext) return;      

  57.          var txtField = new Ext.form.TextField(   

  58.           Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))   

  59.          );   

  60.             

  61.      });      

  62.      var objArray = Ext.DomQuery.select("input[type=password]");      

  63.      Ext.each(objArray, function(obj) {      

  64.         

  65.          var txtField = new Ext.form.CustomTextField(   

  66.           Ext.apply({applyTo:obj,inputType:'password'},eval_r('('+$getValid(obj)+')'))   

  67.          )   

  68.      });      

  69.         

  70.      var objArray = Ext.DomQuery.select("input[type=file]");      

  71.       Ext.each(objArray, function(obj) {      

  72.      });      

  73.      var objArray = Ext.DomQuery.select("textarea");      

  74.      Ext.each(objArray, function(obj) {      

  75.          var txtArea = new Ext.form.TextArea(   

  76.           Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))   

  77.          );      

  78.      });      

  79.           

  80.      var objArray = Ext.DomQuery.select("input[type=checkbox]");      

  81.      Ext.each(objArray, function(obj) {      

  82.          var checkbox = new Ext.form.Checkbox(   

  83.           Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))   

  84.          );      

  85.      });      

  86.      var objArray = Ext.DomQuery.select("input[type=radio]");      

  87.      Ext.each(objArray, function(obj) {      

  88.          var radio = new Ext.form.Radio(   

  89.           Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))   

  90.          );      

  91.      });      

  92.           

  93.      var objArray = Ext.DomQuery.select("select");   

  94.      Ext.each(objArray, function(obj, index) {   

  95.          var select = new Ext.form.ComboBox(   

  96.           Ext.apply({transform:obj,triggerAction:'all', forceSelection : true, cls:obj.className},eval_r('('+$getValid(obj)+')'))   

  97.          );   

  98.           

  99.      });   

  100.         

  101.        

  102.      var objArray = Ext.DomQuery.select("input[type=number]");      

  103.      Ext.each(objArray, function(obj) {   

  104.         

  105.       var dateField = new Ext.form.CustomNumberField(   

  106.     Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))   

  107.    );   

  108.      });   

  109.         

  110.        

  111.      var objArray = Ext.DomQuery.select("input[type=date]");      

  112.      Ext.each(objArray, function(obj) {   

  113.        var dateField = new Ext.form.CustomDateField(   

  114.        Ext.apply({applyTo:obj,format:'Y-m-d',cls:obj.className},eval_r('('+$getValid(obj)+')'))   

  115.       );   

  116.       

  117.      });   

  118.         

  119.         

  120.      var objArray = Ext.DomQuery.select("input[type=email]");      

  121.      Ext.each(objArray, function(obj) {   

  122.        var emailField = new Ext.form.TextField(   

  123.         Ext.apply({applyTo:obj,vtype:'email'},eval_r('('+$getValid(obj)+')'))   

  124.        );   

  125.      });   

  126.         

  127.        

  128.      var objArray = Ext.DomQuery.select("input[type=custom]");      

  129.      Ext.each(objArray, function(obj) {   

  130.       var m_width =   $(obj).width()+7;   

  131.        var houseinfoField =  new Ext.form.HouseInfoArea(   

  132.         Ext.apply({applyTo:obj,cls:obj.className},eval_r('('+obj.val+')'))   

  133.        )   

  134.      });   

  135. }   

  136.   

  137. //验证输入的合法性   

  138. $validEl = function(el){   

  139.          if(typeof(el) == "string") el = document.getElementByIdx_x(el);      

  140.     if(el.ext)   

  141.         return el.ext.validate();   

  142.     return true;   

  143. }   

  144.   

  145. //验证form下所有元素输入的合法性,返回true为合法,false为不合法   

  146. $valid2form = function(form){   

  147. var valid = true;   

  148. var thefrm = form;   

  149. if(typeof(form) == "string") var thefrm = document.getElementByIdx_x(form);   

  150. for (i = 0; i < thefrm.elements.length; i++){   

  151.    var e = thefrm.elements[i];   

  152.   if(!e.name) continue;   

  153.   if(!$validEl(e)){   

  154.     valid = false;   

  155.    }   

  156. }   

  157. return valid;   

  158. }   

  159. Ext.onReady(function() {   

  160. setTimeout($blindFormField, 0);   

  161. })   

  162.   

  163. //HTML 中的使用代码   

  164. <form id='myform' action='action.do' οnsubmit=''   

  165. <table>   

  166.      <tr>   

  167.          <td> 字符串:</td> <td><input type='text' id='string' name='string' val='{allowBlank:false}'/></td>   

  168.          <td> 数字类型:</td> <td><input type='number' id='number' name='number' val='{allowBlank:false}'/></td>   

  169.      </tr>   

  170.      <tr>   

  171.          <td> Email:</td> <td><input type='email' id='email' name='email' val='{allowBlank:false}'/></td>   

  172.          <td> 日期类型:</td> <td><input type='date' id='date' name='date' val='{allowBlank:false}'/></td>   

  173.      </tr>   

  174.      <tr>   

  175.          <td> Select:</td>   

  176.              <td>   

  177.                  <select name='select'>   

  178.                      <option value=1>option1</option>   

  179.                      <option value=2>option2</option>   

  180.                      <option value=3>option3</option>   

  181.                  </select>   

  182.              </td>   

  183.          <td> 自定义类型:</td> <td><input type='custom' id='custom' name='custom' val='{allowBlank:false}'/></td>   

  184.      </tr>   

  185. <table>   

  186. </form>  

转载于:https://my.oschina.net/u/1448456/blog/198740

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值