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

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

转载于:https://www.cnblogs.com/xueduanyang/archive/2008/05/03/1180482.html