Ext框架实现页面渲染

 这里是两年前写的一个方法，想想好久都不用这东西了，今天把他分享出来，以供前端程序员参考。

这个方法的用途是将页面中的组件渲染成Ext风格，下面贴代码吧

Ext.onReady(function() {
    var forms = Ext.query('form');
    //    alert(forms.length);
    for(var i=0;i
        var formname = Ext.query('form')[i].id;
        // 定义表单
        var userForm = new Ext.form.BasicForm(formname);

        // 渲染输入框
        try{
            var text = Ext.query("*[type=text]");
            for(var i=0;i
                if(text[i].id.indexOf('time')>0){
                    break;
                }else{
                    if((typeof(text[i].width)=='undefined')&&(text[i].style.width.length==0)){
                        var tf1 = new Ext.form.TextField({
                            applyTo : text[i],
                            width:100,
                            allowBlank : false
                        });
                    }else{
                        var tf2 = new Ext.form.TextField({
                            applyTo : text[i],
                            allowBlank : false
                        });
                    }

                }

            }
        }catch(e){
            Ext.MessageBox.alert("错误", "输入框渲染错误");
        }

        // 渲染下拉框
        try{
            var select = Ext.query('select');
            for(var i=0;i
                if(typeof(select[i].width)=='undefined'){
                    var cb1 = new Ext.form.ComboBox({
                        emptyText : '请选择',
                        triggerAction:'all',
                        editable:false,
                        width:90,
                        transform : select[i],
                        listeners:{
                            select:function(){
                                try{
                                    var localName = this.hiddenField.id;//select[i].localName;alert(localName);
                                    var el = document.getElementsByName(localName+"0000")[0];
                                    if((this.value).indexOf(":")>0){

                                        if(typeof(el)=='undefined'){
                                            Ext.MessageBox.alert("异常", "子文本框没有定义-异常代码：01");
                                        }else{
                                            el.style.display='inline';
                                        }
                                    }else{
                                        if(typeof(el)=='undefined'){
                                        //                                            Ext.MessageBox.alert("异常", "子文本框没有定义-2");
                                        }else{
                                            el.style.display='none';
                                        }
                                    }

                                }catch(e){
                                    Ext.MessageBox.alert("异常", "子文本框渲染异常");
                                }
                            }
                        }
                    });
                }else{
                    var cb2 = new Ext.form.ComboBox({
                        emptyText : '请选择',
                        triggerAction:'all',
                        editable:false,
                        transform : select[i],
                        listeners:{
                            select:function(){
                                try{
                                    var localName = this.hiddenField.id;//select[i].localName;alert(localName);
                                    var el = document.getElementsByName(localName+"0000")[0];
                                    if((this.value).indexOf(":")>0){
                                        el.style.display='inline';
                                    }else{
                                        el.style.display='none';
                                    }
                                }catch(e){

                                }
                            }
                        }
                    });
                }
            }

        }catch(e){
            Ext.MessageBox.alert("错误", "下拉框渲染错误");
        }

        // 渲染日历框
        try{
            var time = Ext.query("*[id^=time]");
            for(var i=0;i
                if((typeof(time[i].width)=='undefined')&&(time[i].style.width.length==0)){
                    var df1 = new Ext.form.DateField({
                        applyTo : time[i],
                        width:90,
                        value:new Date(),
                        timePicker : true
                    });
                }else{
                    var df2 = new Ext.form.DateField({
                        applyTo : time[i],
                        value:new Date(),
                        timePicker : true
                    });
                }

            }
        }catch(e){
            Ext.MessageBox.alert("错误", "时间框渲染错误");
        }


        // 渲染文本域
        try{
            var textarea = Ext.query('textarea');
            for(var i=0;i
                var ta = new Ext.form.TextArea({
                    applyTo : textarea[i]
                });
            }
        }catch(e){
            Ext.MessageBox.alert("错误", "文本域渲染错误");
        }

        //渲染按钮
        try{
            var btn = new Ext.Button({
                applyTo:'btn',
                text: '提交'
            });
        }catch(e){
        //            Ext.MessageBox.alert("错误", "按钮渲染错误");
        }
        //添加
        try{
            userForm.add(tf1);
        }catch(e){
        }
        try{
            userForm.add(tf2);
        }catch(e){
        }
        try{
            userForm.add(df1);
        }catch(e){
        }
        try{
            userForm.add(df2);
        }catch(e){
        }
        try{
            userForm.add(cb1);
        }catch(e){
        }
        try{
            userForm.add(cb2);
        }catch(e){
        }
    }

});

这里就不做优化了，只当是提供一种思路吧