使用Ext Form自动绑定Html中的Form元素

在做EXT开发中，尽能的是使用上EXT的所有功能，不然就浪费了那500K的身材了，EXT的主要功能之一的FORM组件，验证功能很强大，而且样式也挺好看的。但在使用EXT的form布局来设计表单时，难以直观的看到页面的排板模形，特别是对于习惯了使用<table>来排板<input>等元素的程序员来说，更是难以接受。为了满足习惯性可观的设计表面排板，可以在页面加载完后（Ext.onReady），将EXT的FORM元素自动绑定相应的html form元素，这样则在页面设计时直接使用html中form元素，而不必再关心到EXT排板。

//把ext 对象绑定在Html Form元素时的ext属性中 
Ext.override(Ext.Component, { 
initComponent :function(){ 
  this.on('render', function(){ 
   if(this.el) 
    Ext.getDom(this.el).ext = this; 
   if(this.hiddenField)//Combo 
    Ext.getDom(this.hiddenField).ext = this; 
  }) 
} 
});  
­
//获取验证信息 
// 将EXT的验证属性写成JSONString格式，保护在val属性中
$getValid = function(el){ 
var valid = "{}"; 
    if(Ext.getDom(el).attributes['val']) 
     valid = Ext.getDom(el).attributes['val'].nodeValue; 
    return valid; 
} 
//自动绑定Html中的Form元素 
$blindFormField = function(){ 
var objArray = Ext.DomQuery.select("input[type=submit]");   
    Ext.each(objArray, function(obj) { 
        var btn = new Ext.Button({   
            text : obj.value,   
            applyTo : obj,   
            handler : obj.onclick,   
            type : obj.type   
        });   
        btn.getEl().replace(Ext.get(obj));   
    });   
    var objArray = Ext.DomQuery.select("input[type=reset]");   
    Ext.each(objArray, function(obj) {   
        var btn = new Ext.Button({   
            text : obj.value,   
            applyTo : obj,   
            handler : obj.onclick,   
            type : obj.type   
        });   
        btn.getEl().replace(Ext.get(obj));   
    });   
    var objArray = Ext.DomQuery.select("input[type=button]");   
    Ext.each(objArray, function(obj) {   
        var btn = new Ext.Button({   
            text : obj.value,   
            applyTo : obj,   
            handler : obj.onclick,   
            type : obj.type   
        });   
        btn.getEl().replace(Ext.get(obj));   
    });   
    /**   
     * text and textarea and password and file   
     */   
    var objArray = Ext.DomQuery.select("input[type=text]");   
    Ext.each(objArray, function(obj) { 
     if(Ext.getDom(obj).ext) return;   
        var txtField = new Ext.form.TextField( 
         Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) 
        ); 
         
    });   
    var objArray = Ext.DomQuery.select("input[type=password]");   
    Ext.each(objArray, function(obj) {   
     
        var txtField = new Ext.form.CustomTextField( 
         Ext.apply({applyTo:obj,inputType:'password'},eval('('+$getValid(obj)+')')) 
        ) 
    });   
     
    var objArray = Ext.DomQuery.select("input[type=file]");   
     Ext.each(objArray, function(obj) {   
    });   
    var objArray = Ext.DomQuery.select("textarea");   
    Ext.each(objArray, function(obj) {   
        var txtArea = new Ext.form.TextArea( 
         Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) 
        );   
    });   
    /**   
     * checkbox and radio   
     */   
    var objArray = Ext.DomQuery.select("input[type=checkbox]");   
    Ext.each(objArray, function(obj) {   
        var checkbox = new Ext.form.Checkbox( 
         Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) 
        );   
    });   
    var objArray = Ext.DomQuery.select("input[type=radio]");   
    Ext.each(objArray, function(obj) {   
        var radio = new Ext.form.Radio( 
         Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) 
        );   
    });   
    /**   
     * select or comboBox   
     */   
    var objArray = Ext.DomQuery.select("select"); 
    Ext.each(objArray, function(obj, index) { 
        var select = new Ext.form.ComboBox( 
         Ext.apply({transform:obj,triggerAction:'all', forceSelection : true, cls:obj.className},eval('('+$getValid(obj)+')')) 
        ); 
       
    }); 
     
    /** 
     * number 
     */ 
    var objArray = Ext.DomQuery.select("input[type=number]");   
    Ext.each(objArray, function(obj) { 
     
     var dateField = new Ext.form.CustomNumberField( 
   Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) 
  ); 
    }); 
     
    /** 
     * 日期类型 
     */ 
    var objArray = Ext.DomQuery.select("input[type=date]");   
    Ext.each(objArray, function(obj) { 
      var dateField = new Ext.form.CustomDateField( 
      Ext.apply({applyTo:obj,format:'Y-m-d',cls:obj.className},eval('('+$getValid(obj)+')')) 
     ); 
   
    }); 
     
     /** 
     * email类型 
     */ 
    var objArray = Ext.DomQuery.select("input[type=email]");   
    Ext.each(objArray, function(obj) { 
      var emailField = new Ext.form.TextField( 
       Ext.apply({applyTo:obj,vtype:'email'},eval('('+$getValid(obj)+')')) 
      ); 
    }); 
     
    /** 
     * 自定义类型 
     */ 
    var objArray = Ext.DomQuery.select("input[type=custom]");   
    Ext.each(objArray, function(obj) { 
     var m_width =  $(obj).width()+7; 
      var houseinfoField =  new Ext.form.HouseInfoArea( 
       Ext.apply({applyTo:obj,cls:obj.className},eval('('+obj.val+')')) 
      ) 
    }); 
}

//验证输入的合法性
$validEl = function(el){
         if(typeof(el) == "string") el = document.getElementById(el); 	
	if(el.ext)
		return el.ext.validate();
	return true;
}

//验证form下所有元素输入的合法性，返回true为合法，false为不合法 
$valid2form = function(form){ 
var valid = true; 
var thefrm = form; 
if(typeof(form) == "string") var thefrm = document.getElementById(form); 
for (i = 0; i < thefrm.elements.length; i++){ 
  var e = thefrm.elements[i]; 
  if(!e.name) continue; 
  if(!$validEl(e)){ 
   valid = false; 
  } 
} 
return valid; 
} 
Ext.onReady(function() { 
setTimeout($blindFormField, 0); 
}) 

//HTML 中的使用代码
<form id='myform' action='action.do' onsubmit='' 
<table>
	<tr>
		<td> 字符串：</td> <td><input type='text' id='string' name='string' val='{allowBlank:false}'/></td>
		<td> 数字类型：</td> <td><input type='number' id='number' name='number' val='{allowBlank:false}'/></td>
	</tr>
	<tr>
		<td> Email：</td> <td><input type='email' id='email' name='email' val='{allowBlank:false}'/></td>
		<td> 日期类型：</td> <td><input type='date' id='date' name='date' val='{allowBlank:false}'/></td>
	</tr>
	<tr>
		<td> Select：</td> 
			<td>
				<select name='select'>
					<option value=1>option1</option>
					<option value=2>option2</option>
					<option value=3>option3</option>
				</select>
			</td>
		<td> 自定义类型：</td> <td><input type='custom' id='custom' name='custom' val='{allowBlank:false}'/></td>
	</tr>
<table>
</form>

­

如果在页面中存在有两个name一样的情况下，以上代码在IE上执行后，第二个name将无法的元素将不被绑定，原因是在IE下面有个bug，如果某个节点的name跟你要取得节点的名字一样，这样会得到name＝youid的那个节点
<input type='text' id='username_id' name='username'/>
<input type='text' id='username' name='username_temp'/>
这样执行alert(document.getElementById('username').id)的结果是username_id而不是username
解决这个BUG的方法一般情况有两种:­
方法一：尽量避免在页面中出现name与id属性相同的对象
方法二：利用JavaScript的特点,重写document.getElementById

//IE_BUG_PATCH.js
if (/msie/i.test(navigator.userAgent)){ //根据userAgent确定用户使用IE浏览器   
document.nativeGetElementById = document.getElementById; 
document.getElementById = function(id){ 
  var elem = document.nativeGetElementById(id); 
  if(elem){     
   //确定id相同 
   if(elem.attributes['id'].value == id){ 
    return elem; 
   }else{                   
   //如果没有ID相同的,那么就遍历所有元素的集合找到id相同的元素 
    for(var i=1;i<document.all[id].length;i++) { 
     if(document.all[id][i].attributes['id'].value == id){ 
      return document.all[id][i]; 
     } 
    } 
   } 
  } 
  return elem; 
}; 
};

评论

6 楼 heroyanglei 2014-01-21  

楼主 ，不过我就是想知道你使用了很多的eval()，这个函数的返回值是对象还是什么？会影响性能吗？

5 楼 vickypig 2009-11-24  

radio这个好像有点问题？
而且在里面加上这个提示的东西也会出错！Ext.form.Field.prototype.msgTarget='under';

4 楼 peteronline 2009-11-23  

好像变的更复杂了。

3 楼 vickypig 2009-11-13  

之前的问题解决了。我是使用
new Ext.form.NumberField和new Ext.form.DateField
new Ext.form.HouseInfoArea这个没有遇到过。
现在用了这个form之后，好像样式不行

2 楼 vickypig 2009-11-13  

<p>您好。我用了你的绑定，在数字和日期那边出现了bug。 <br>可否发一个正确的版本给我，我的邮箱是:[e-mail] <br>或者可以加我qq：32963797 <br><br>里面是不是只用到ext啊。有没有用到jquery啊</p>
<p><br><br></p>
<p> 
</p>
<table style="" border="0" cellspacing="1" width="100%"><tbody>
<tr height="20">
<td width="20%">错误信息：</td>
<td width="80%">缺少对象</td>
</tr>
<tr height="20">
<td width="20%">错误Url：</td>
<td width="80%">js/form.js</td>
</tr>
<tr height="20">
<td width="20%">错误行：</td>
<td width="80%">110</td>
</tr>
</tbody></table>
<table style="" border="0" width="100%" align="center"><tbody>
<tr>
<td width="10">106:</td>
<td>* number </td>
</tr>
<tr>
<td width="10">107:</td>
<td>*/ </td>
</tr>
<tr>
<td width="10">108:</td>
<td>var objArray = Ext.DomQuery.select("input[type=number]"); </td>
</tr>
<tr>
<td width="10">109:</td>
<td>Ext.each(objArray, function(obj) { </td>
</tr>
<tr>
<td width="10">110:</td>
<td>var dateField = new Ext.form.CustomNumberField( </td>
</tr>
<tr>
<td width="10">111:</td>
<td>Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')')) </td>
</tr>
<tr>
<td width="10">112:</td>
<td>); </td>
</tr>
<tr>
<td width="10">113:</td>
<td>}); </td>
</tr>
<tr>
<td width="10">114:</td>
<td> </td>
</tr>
<tr>
<td width="10">115:</td>
<td>/** </td>
</tr>
<tr>
<td width="10">116:</td>
<td>* 日期类型 </td>
</tr>
<tr>
<td width="10">117:</td>
<td>*/ </td>
</tr>
</tbody></table>

1 楼 xiang 2009-05-11  

那可以加个校验是否有同名对象的方法啊！！！！