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

             }]

         });

 

 

 

 

转载于:https://www.cnblogs.com/rc727512646/archive/2013/03/25/2981205.html