近来由于公司准备引入Ext做表现层的一些东西，对于项目中现有的页面与Ext的Form Widget无法兼容，所以产生了使用Ext的Comp替换现有的HTML Element的想法，代码如下，经过简单测试，基本可以满足一般的HTML页面元素无损封装，同时包括了后期对于封装好的Ext Comp使用Ext的一些事件和特效做了准备。
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/resources/images/default/s.gif';
Ext.QuickTips.init();
/**
* button
*/
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) {
var txtField = new Ext.form.TextField({
applyTo : obj,
validationEvent : 'blur',
validator : function() {
Ext.Ajax.request({
url : '1.htm',
success : function(response) {
txtField.clearInvalid();
txtField.markInvalid(response.responseText);
},
failure : function() {
alert(1);
}
});
},
allowBlank : ((obj.attributes.getNamedItem("notNull") || obj.attributes
.getNamedItem("notnull")) ? false : true),
blankText : '该字段不能为空'
});
});
var objArray = Ext.DomQuery.select("input[type=password]");
Ext.each(objArray, function(obj) {
var txtField = new Ext.form.TextField({
applyTo : obj,
inputType : 'password'
});
});
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({
applyTo : obj
});
});
/**
* checkbox and radio
*/
var objArray = Ext.DomQuery.select("input[type=checkbox]");
Ext.each(objArray, function(obj) {
var checkbox = new Ext.form.Checkbox({
applyTo : obj
});
});
var objArray = Ext.DomQuery.select("input[type=radio]");
Ext.each(objArray, function(obj) {
var radio = new Ext.form.Radio({
applyTo : obj
});
});
/**
* select or comboBox
*/
var objArray = Ext.DomQuery.select("select");
Ext.each(objArray, function(obj) {
var btn = new Ext.form.ComboBox({
typeAhead : true,
triggerAction : 'all',
transform : obj,
forceSelection : true
});
});
})
原型页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>test</title>
<link rel="stylesheet" type="text/css"
href="resources/css/ext-all.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug.js"></script>
<script type="text/javascript" src="example-form.js"></script>
</head>
<body>
<form>
<input type="submit" value="asdqweqwe" onclick="alert(2)">
<input type="text" notnull>
<input type="text">
<input type="password">
<input type="file">
<textarea></textarea>
<input type="checkbox">
<input type="radio" name="q">qweqwe</input>
<input type="radio" name="q">qweqwe</input>
<select name="s">
<option value="kkkkk">
pp
</option>
<option value="gg">
ww
</option>
</select>
</form>
</body>
</html>
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/resources/images/default/s.gif'; Ext.QuickTips.init(); /**
* button */ 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) { var txtField = new Ext.form.TextField({ applyTo : obj, validationEvent : 'blur', validator : function() { Ext.Ajax.request({ url : '1.htm', success : function(response) { txtField.clearInvalid(); txtField.markInvalid(response.responseText); }, failure : function() { alert(1); } }); }, allowBlank : ((obj.attributes.getNamedItem("notNull") || obj.attributes .getNamedItem("notnull")) ? false : true), blankText : '该字段不能为空' }); }); var objArray = Ext.DomQuery.select("input[type=password]"); Ext.each(objArray, function(obj) { var txtField = new Ext.form.TextField({ applyTo : obj, inputType : 'password' }); }); 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({ applyTo : obj }); }); /** * checkbox and radio */ var objArray = Ext.DomQuery.select("input[type=checkbox]"); Ext.each(objArray, function(obj) { var checkbox = new Ext.form.Checkbox({ applyTo : obj }); }); var objArray = Ext.DomQuery.select("input[type=radio]"); Ext.each(objArray, function(obj) { var radio = new Ext.form.Radio({ applyTo : obj }); }); /** * select or comboBox */ var objArray = Ext.DomQuery.select("select"); Ext.each(objArray, function(obj) { var btn = new Ext.form.ComboBox({ typeAhead : true, triggerAction : 'all', transform : obj, forceSelection : true }); });})<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" /> <script type="text/javascript" src="adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-all-debug.js"></script> <script type="text/javascript" src="example-form.js"></script> </head> <body> <form> <input type="submit" value="asdqweqwe" onclick="alert(2)"> <input type="text" notnull> <input type="text"> <input type="password"> <input type="file"> <textarea></textarea> <input type="checkbox"> <input type="radio" name="q">qweqwe</input> <input type="radio" name="q">qweqwe</input> <select name="s"> <option value="kkkkk"> pp </option> <option value="gg"> ww </option> </select> </form> </body></html>
