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）'

                })

            ]

        })

　　

Ext.Viewport布局示例

        new Ext.Viewport({

            title : 'Ext.Viewport示例',

            layout:'border',//表格布局

            items: [

            {

                title: 'north Panel',

                html : '上边',

                region: 'north',//指定子面板所在区域为north

                height: 100

            },{

                title: 'West Panel',

                html : '左边',

                region:'west',//指定子面板所在区域为west

                width: 150

            },{

                title: 'Main Content',

                html : '中间',

                region:'center'//指定子面板所在区域为center

            }]

        });