EXTJS布局示例（panel，Viewport，TabPanel）

面板控件panel应用  
        new Ext.Panel({  
            title:'面板头部（header）',  
            tbar : ['顶端工具栏(top toolbars)'],  
            bbar : ['底端工具栏(bottom toolbars)'],  
            height:200,  
            width:300,  
            frame:true,  
            applyTo :'panel',  
            bodyStyle:'background-color:#FFFFFF',  
            html:'<div>面板体（body）</div>',  
            tools : [  
                {id:'toggle'},  
                {id:'close'},  
                {id:'maximize'}  
            ],  
            buttons:[  
                new Ext.Button({  
                    text:'面板底部（footer）' 
                })  
            ]  
        })  
 
 
面板panel加载远程页面  
        var panel = new Ext.Panel({  
            title:'面板加载远程页面',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            autoScroll : true,//自动显示滚动条  
            collapsible : true,//允许展开和收缩  
            applyTo :'panel',  
            autoLoad :'page1.html',//自动加载面板体的默认连接  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
 
面板panel加载本地页面  
        var panel = new Ext.Panel({  
            title:'面板加载本地资源',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoScroll : true,//自动显示滚动条  
            autoHeight  : false,//使用固定高度  
            //autoHeight  : true,//使用自动高度  
            applyTo :'panel',  
            contentEl :'localElement',//加载本地资源  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
         本地资源  
    <table border=1 id='localElement'>  
        <tr><th colspan=2>本地资源---员工列表</th></tr>  
        <tr>  
            <th width = 60>序号</th><th width = 80>姓名</th>  
        <tr>  
        <tr><td>1</td><td>张三</td></tr>  
        <tr><td>2</td><td>李四</td></tr>  
        <tr><td>3</td><td>王五</td></tr>  
        <tr><td>4</td><td>赵六</td></tr>  
        <tr><td>5</td><td>陈七</td></tr>  
        <tr><td>6</td><td>杨八</td></tr>  
        <tr><td>7</td><td>刘九</td></tr>  
    </table>  
 
 
使用html配置项定义面板panel内容  
        var htmlArray = [  
                        '<table border=1>',  
                            '<tr><td colspan=2>员工列表</td></tr>',  
                            '<tr><th width = 60>序号</th><th width = 80>姓名</th><tr>',  
                            '<tr><td>1</td><td>张三</td></tr>',  
                            '<tr><td>2</td><td>李四</td></tr>',  
                            '<tr><td>3</td><td>王五</td></tr>',  
                            '<tr><td>4</td><td>赵六</td></tr>',  
                            '<tr><td>5</td><td>陈七</td></tr>',  
                            '<tr><td>6</td><td>杨八</td></tr>',  
                            '<tr><td>7</td><td>刘九</td></tr>',  
                        '</table>' 
                      ];  
        var panel = new Ext.Panel({  
            title:'使用html配置项自定义面板内容',  
            height:150,//设置面板的高度  
            width:250,//设置面板的宽度  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoScroll : true,//自动显示滚动条  
            applyTo :'panel',  
            html:htmlArray.join(''),  
            bodyStyle:'background-color:#FFFFFF'//设置面板体的背景色  
        })  
 
 
使用items添加panel内容  
        var panel = new Ext.Panel({  
            header : true,  
            title:'日历',  
            frame:true,//渲染面板  
            collapsible : true,//允许展开和收缩  
            autoHeight : true,//自动高度  
            width : 189,//固定宽度  
            applyTo :'panel',  
            items: new Ext.DatePicker()//向面板中添加一个日期组件  
        })  
 
 
 
面板panel嵌套的使用  
 
        var panel = new Ext.Panel({  
            header : true,  
            title:'使用items进行面板嵌套',  
            frame:true,//渲染面板