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

1. 在做EXT开发中，尽能的是使用上EXT的所有功能，不然就浪费了那500K的身材了，EXT的主要功能之一的FORM组件，验证功能很强大，而且样式也挺好看的。但在使用EXT的form布局来设计表单时，难以直观的看到页面的排板模形，特别是对于习惯了使用<table>来排板<input>等元素的程序员来说，更是难以接受。为了满足习惯性可观的设计表面排板，可以在页面加载完后（Ext.onReady），将EXT的FORM元素自动绑定相应的htmlform元素，这样则在页面设计时直接使用html中form元素，而不必再关心到EXT排板。
   
2. 
   
3. //把ext 对象绑定在HtmlForm元素时的ext属性中   
4. Ext.override(Ext.Component, {  
5. initComponent :function(){  
6.   this.on('render', function(){  
7.    if(this.el)  
8.     Ext.getDom(this.el).ext= this;  
9.    if(this.hiddenField)//Combo   
10.     Ext.getDom(this.hiddenField).ext= this;  
11.    })  
12. }  
13. });    
14. ­  
15. //获取验证信息   
16. //将EXT的验证属性写成JSONString格式，保护在val属性中   
17. $getValid = function(el){  
18. var valid= "{}";  
19.     if(Ext.getDom(el).attributes['val'])  
20.      valid = Ext.getDom(el).attributes['val'].nodeValue;  
21.     return valid;  
22. }  
23. //自动绑定Html中的Form元素   
24. $blindFormField = function(){  
25. var objArray =Ext.DomQuery.select("input[type=submit]");     
26.     Ext.each(objArray, function(obj) {  
27.         var btn = new Ext.Button({     
28.             text :obj.value,     
29.             applyTo :obj,     
30.             handler :obj.onclick,     
31.             type :obj.type     
32.         });     
33.         btn.getEl().replace(Ext.get(obj));     
34.     });     
35.     var objArray = Ext.DomQuery.select("input[type=reset]");     
36.     Ext.each(objArray, function(obj){     
37.         var btn = new Ext.Button({     
38.             text :obj.value,     
39.             applyTo :obj,     
40.             handler :obj.onclick,     
41.             type :obj.type     
42.         });     
43.         btn.getEl().replace(Ext.get(obj));     
44.     });     
45.     var objArray = Ext.DomQuery.select("input[type=button]");     
46.     Ext.each(objArray, function(obj){     
47.         var btn = new Ext.Button({     
48.             text :obj.value,     
49.             applyTo :obj,     
50.             handler :obj.onclick,     
51.             type :obj.type     
52.         });     
53.         btn.getEl().replace(Ext.get(obj));     
54.     });     
55.          
56.     var objArray = Ext.DomQuery.select("input[type=text]");     
57.     Ext.each(objArray, function(obj) {  
58.      if(Ext.getDom(obj).ext) return;     
59.         var txtField = new Ext.form.TextField(  
60.          Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))  
61.         );   
62.            
63.     });     
64.     var objArray = Ext.DomQuery.select("input[type=password]");     
65.     Ext.each(objArray, function(obj){     
66.        
67.         var txtField = new Ext.form.CustomTextField(  
68.          Ext.apply({applyTo:obj,inputType:'password'},eval_r('('+$getValid(obj)+')'))  
69.         )   
70.     });     
71.        
72.     var objArray = Ext.DomQuery.select("input[type=file]");     
73.      Ext.each(objArray, function(obj){     
74.     });     
75.     var objArray = Ext.DomQuery.select("textarea");     
76.     Ext.each(objArray, function(obj){     
77.         var txtArea = new Ext.form.TextArea(  
78.          Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))  
79.         );     
80.     });     
81.          
82.     var objArray = Ext.DomQuery.select("input[type=checkbox]");     
83.     Ext.each(objArray, function(obj){     
84.         var checkbox = new Ext.form.Checkbox(  
85.          Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))  
86.         );     
87.     });     
88.     var objArray = Ext.DomQuery.select("input[type=radio]");     
89.     Ext.each(objArray, function(obj){     
90.         var radio = new Ext.form.Radio(  
91.          Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))  
92.         );     
93.     });     
94.          
95.     var objArray = Ext.DomQuery.select("select");  
96.     Ext.each(objArray, function(obj, index) {  
97.         var select = new Ext.form.ComboBox(  
98.          Ext.apply({transform:obj,triggerAction:'all', forceSelection: true,cls:obj.className},eval_r('('+$getValid(obj)+')'))  
99.         );   
100.          
101.     });   
102.        
103.        
104.     var objArray = Ext.DomQuery.select("input[type=number]");     
105.     Ext.each(objArray, function(obj) {  
106.        
107.      var dateField = new Ext.form.CustomNumberField(  
108.    Ext.apply({applyTo:obj},eval_r('('+$getValid(obj)+')'))  
109.    );  
110.     });   
111.        
112.        
113.     var objArray = Ext.DomQuery.select("input[type=date]");     
114.     Ext.each(objArray, function(obj) {  
115.       var dateField = new Ext.form.CustomDateField(  
116.       Ext.apply({applyTo:obj,format:'Y-m-d',cls:obj.className},eval_r('('+$getValid(obj)+')'))  
117.      );   
118.      
119.     });   
120.        
121.         
122.     var objArray = Ext.DomQuery.select("input[type=email]");     
123.     Ext.each(objArray, function(obj) {  
124.       var emailField = new Ext.form.TextField(  
125.        Ext.apply({applyTo:obj,vtype:'email'},eval_r('('+$getValid(obj)+')'))  
126.       );   
127.     });   
128.        
129.        
130.     var objArray = Ext.DomQuery.select("input[type=custom]");     
131.     Ext.each(objArray, function(obj) {  
132.      var m_width =  $(obj).width()+7;  
133.       var houseinfoField=  new Ext.form.HouseInfoArea(  
134.        Ext.apply({applyTo:obj,cls:obj.className},eval_r('('+obj.val+')'))  
135.       )   
136.     });   
137. }  
138.   
139. //验证输入的合法性   
140. $validEl = function(el){  
141.          if(typeof(el)== "string") el =document.getElementByIdx_x(el);     
142.     if(el.ext)  
143.         return el.ext.validate();  
144.     return true;  
145. }  
146.   
147. //验证form下所有元素输入的合法性，返回true为合法，false为不合法   
148. $valid2form = function(form){  
149. var valid= true;  
150. var thefrm = form;  
151. if(typeof(form)== "string") var thefrm =document.getElementByIdx_x(form);  
152. for (i= 0; i < thefrm.elements.length;i++){   
153.    var e =thefrm.elements[i];  
154.   if(!e.name) continue;  
155.   if(!$validEl(e)){  
156.    valid = false;  
157.    }  
158. }  
159. return valid;  
160. }  
161. Ext.onReady(function() {  
162. setTimeout($blindFormField, 0);  
163. })  
164.   
165. //HTML中的使用代码   
166. <form id='myform' action='action.do' οnsubmit=''   
167. <table>  
168.     <tr>  
169.         <td>字符串：</td><td><inputtype='text' id='string' name='string' val='{allowBlank:false}'/></td>  
170.         <td>数字类型：</td><td><inputtype='number' id='number' name='number' val='{allowBlank:false}'/></td>  
171.     </tr>  
172.     <tr>  
173.         <td>Email：</td><td><inputtype='email' id='email' name='email' val='{allowBlank:false}'/></td>  
174.         <td>日期类型：</td><td><inputtype='date' id='date' name='date' val='{allowBlank:false}'/></td>  
175.     </tr>  
176.     <tr>  
177.         <td>Select：</td>  
178.             <td>  
179.                 <select name='select'>  
180.                     <option value=1>option1</option>  
181.                     <option value=2>option2</option>  
182.                     <option value=3>option3</option>  
183.                 </select>  
184.             </td>  
185.         <td>自定义类型：</td><td><inputtype='custom' id='custom' name='custom' val='{allowBlank:false}'/></td>  
186.     </tr>  
187. <table>  
188. </form>