Ext框架實現頁面渲染

 這裏是兩年前寫的一個方法，想想好久都不用這東西了，今天把他分享出來，以供前端程序員參考。

這個方法的用途是將頁面中的組件渲染成Ext風格，下面貼代碼吧

Ext.onReady(function() {
    var forms = Ext.query('form');
    //    alert(forms.length);
    for(var i=0;i<forms.length;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<text.length;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<select.length;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<time.length;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<textarea.length;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){
        }
    }

});

這裏就不做優化了，只當是提供一種思路吧