ExtJS 3 在Tab下加入Form 实例

最新推荐文章于 2023-08-03 15:00:18 发布

iteye_6233

最新推荐文章于 2023-08-03 15:00:18 发布

阅读量115

点赞数

文章标签： javascript ViewUI

相关导入的js 和 css文件需齐备，这个无须多说了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs</title>
<link rel="stylesheet" type="text/css"
	href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
	href="../resources/css/xtheme-blue.css" />

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>

<script>
    Ext.onReady(function(){

      
    var fs = new Ext.FormPanel({
        frame: true,
        title:'Migrate File to DataBase',
        labelAlign: 'right',
        labelWidth: 90,
        height:240,
        waitMsgTarget: true,
        items: [
            new Ext.form.FieldSet({
                title: 'Select',
                autoHeight: true,
                defaultType: 'textfield',
                items: [
                    new Ext.form.TextField({
                        fieldLabel: 'Project Name',
                        name:'ProjectName',   
                        id:'ProjectName',                   
                        selectOnFocus:true,
                        width:120
                    }),
                    new Ext.form.Checkbox({
                        fieldLabel: 'Migrate ALL',
                        id:'migrateAll',
                        name:'migrateAll'
                    }),
                   new Ext.form.TextField({
                        fieldLabel: 'Begin Page',
                        id:'mtBegin',
                        name:'mtBegin',                      
                        selectOnFocus:true,
                        width:30
                    }),
                   new Ext.form.TextField({
                        fieldLabel: 'End Page',
                        id:'mtEnd',
                        name:'mtEnd',                      
                        selectOnFocus:true,
                        width:30
                    })                    
                ]
            })
        ],
       buttons: [{
            text: 'Migrate',
            handler: function(){
               alert("Begin Migrate");
               //can submit form as :
               /*
               fs.getForm().submit({
	                    url: 'mt_get_migrate_export_count',
	                    waitMsg: 'Migrate...',
	                    timeout: 50000,
	                    success: function(fs, o){
	                    }
	           });
	           */
            }
        },{
            text: 'DownLoad Log',
            handler:DownLoadLog
            
        },{
            text: 'Clear Log',
            handler: ClearLog
            
        }
        ]
    });
    
    function DownLoadLog()
    {
    }
    function ClearLog()
    {
    }    
    
    var fs2 = new Ext.FormPanel({
        frame: true,
        title:'Migrate2',
        labelAlign: 'right',
        labelWidth: 90,
        height:240,
        waitMsgTarget: true,
        items: [
            new Ext.form.FieldSet({
                title: 'Select',
                autoHeight: true,
                defaultType: 'textfield',
                items: [
                    new Ext.form.TextField({
                        fieldLabel: 'Project Name',
                        name:'ProjectName',   
                        id:'ProjectName',                   
                        selectOnFocus:true,
                        width:120
                    }),
                    new Ext.form.Checkbox({
                        fieldLabel: 'Migrate ALL',
                        id:'migrateAll',
                        name:'migrateAll'
                    })           
                ]
            })
        ],
       buttons: [{
            text: 'Migrate',
            handler: function(){
               alert("Begin Migrate");
               //can submit form as :
               /*
               fs.getForm().submit({
	                    url: 'mt_get_migrate_export_count',
	                    waitMsg: 'Migrate...',
	                    timeout: 50000,
	                    success: function(fs, o){
	                    }
	           });
	           */
            }
        }
        ]
    });    
    
        
      var tabs = new Ext.TabPanel({
        renderTo: 'tabDiv',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[fs,fs2
        ]
    });
    
    
});    

    </script>
</head>
<body>
<div id="tabDiv"></div>


<br>
</body>
</html>