使用Ext Form自動綁定Html中的Form元素

時間 2019-11-09

標籤使用 ext form 自動綁定 html 元素欄目 HTML 简体版

原文原文鏈接

Java代碼 node

//把ext 對象綁定在Html Form元素時的ext屬性中瀏覽器
Ext.override(Ext.Component, { app
initComponent :function(){ ide
this.on('render', function(){ ui
if(this.el) this
Ext.getDom(this.el).ext = this; spa
if(this.hiddenField)//Combo orm
Ext.getDom(this.hiddenField).ext = this; 對象
}) ip
}
});
//獲取驗證信息
// 將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

Java代碼