近来由于公司准备引入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>
本文介绍了一种将HTML页面元素转换为ExtJS组件的方法。通过使用ExtJS的Button、TextField等组件替换原有的HTML元素，实现了页面功能的同时提升了用户体验。文章还展示了如何处理不同类型的输入框及选择框。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
