Ext与现有项目的结合(一)-完全封装已有的HTML元素使之成为Ext的组件

本文介绍了一种将HTML页面元素转换为ExtJS组件的方法，通过简单的代码实现，使得原有页面能够无缝对接ExtJS，增强页面交互性和维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

近来由于公司准备引入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>