论坛首页 → Web前端技术论坛 →

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

浏览 5293 次
锁定老帖子 主题：使用Ext Form自动绑定Html中的Form元素
精华帖 (1) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • codesoul
  • 等级: 一星会员
  • 性别:
  • 文章: 13
  • 积分: 100
  • 来自: 厦门
   发表时间：2009-05-11  
在做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; 
}; 
};
返回顶楼
         
  • xiang
  • 等级: 二星会员
  • 文章: 47
  • 积分: 224
   发表时间：2009-05-11  
那可以加个校验是否有同名对象的方法啊！！！！
返回顶楼
          回帖地址
0 请登录后投票
  • vickypig
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 0
  • 来自: 福建
   发表时间：2009-11-13  

您好。我用了你的绑定，在数字和日期那边出现了bug。
可否发一个正确的版本给我，我的邮箱是:vicky_yaoxj@163.com
或者可以加我qq：32963797

里面是不是只用到ext啊。有没有用到jquery啊



 

错误信息： 缺少对象
错误Url： js/form.js
错误行： 110
106: * number
107: */
108: var objArray = Ext.DomQuery.select("input[type=number]");
109: Ext.each(objArray, function(obj) {
110: var dateField = new Ext.form.CustomNumberField(
111: Ext.apply({applyTo:obj},eval('('+$getValid(obj)+')'))
112: );
113: });
114:  
115: /**
116: * 日期类型
117: */
返回顶楼
          回帖地址
0 请登录后投票
  • vickypig
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 0
  • 来自: 福建
   发表时间：2009-11-13  
之前的问题解决了。我是使用
new Ext.form.NumberField和new Ext.form.DateField
new Ext.form.HouseInfoArea这个没有遇到过。
现在用了这个form之后，好像样式不行
返回顶楼
          回帖地址
0 请登录后投票
  • peteronline
  • 等级: 初级会员
  • 性别:
  • 文章: 95
  • 积分: 50
  • 来自: 杭州
   发表时间：2009-11-23  
好像变的更复杂了。
返回顶楼
          回帖地址
0 请登录后投票
  • vickypig
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 0
  • 来自: 福建
   发表时间：2009-11-24  
radio这个好像有点问题？
而且在里面加上这个提示的东西也会出错！Ext.form.Field.prototype.msgTarget='under';
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics