使用Ext Form封装项目中已有的Html元素成为Ext的组件

最新推荐文章于 2024-08-07 14:19:47 发布

不忘初心：）

最新推荐文章于 2024-08-07 14:19:47 发布

阅读量1k

点赞数

文章标签： ext html function input stylesheet button

 
 Ext.onReady(function() {  
    Ext.BLANK_IMAGE_URL = '../../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);  
                    }  
                });  
            }  
        });  
    });  
    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  
        });  
    });  
  
})  
 

测试页面

    Java代码 
     
    
  
<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" οnclick="alert(2)">  
            <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>  

不忘初心：）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Ext Form封装项目中已有的Html元素成为Ext的组件

<br />Ext.onReady(function() { Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'; Ext.QuickTips.init(); /** * button */ var objArray = Ext.DomQuery.select("input[type=submit]"); Ext.each(objArray, function(obj)
复制链接

扫一扫