EXTJS布局樣本（panel，Viewport，TabPanel）

面板控制項panel應用<br />new Ext.Panel({<br />title:'面板頭部（header）',<br />tbar : ['頂端工具列(top toolbars)'],<br />bbar : ['底端工具列(bottom toolbars)'],<br />height:200,<br />width:300,<br />frame:true,<br />applyTo :'panel',<br />bodyStyle:'background-color:#FFFFFF',<br />html:'<div>面板體（body）</div>',<br />tools : [<br />{id:'toggle'},<br />{id:'close'},<br />{id:'maximize'}<br />],<br />buttons:[<br />new Ext.Button({<br />text:'面板底部（footer）'<br />})<br />]<br />})</p><p>面板panel載入遠程頁面<br />var panel = new Ext.Panel({<br />title:'面板載入遠程頁面',<br />height:150,//設定面板的高度<br />width:250,//設定面板的寬度<br />frame:true,//渲染面板<br />autoScroll : true,//自動顯示捲軸<br />collapsible : true,//允許展開和收縮<br />applyTo :'panel',<br />autoLoad :'page1.html',//自動載入面板體的預設串連<br />bodyStyle:'background-color:#FFFFFF'//設定面板體的背景色<br />})</p><p>面板panel載入本地頁面<br />var panel = new Ext.Panel({<br />title:'面板載入本地資源',<br />height:150,//設定面板的高度<br />width:250,//設定面板的寬度<br />frame:true,//渲染面板<br />collapsible : true,//允許展開和收縮<br />autoScroll : true,//自動顯示捲軸<br />autoHeight : false,//使用固定高度<br />//autoHeight : true,//使用自動高度<br />applyTo :'panel',<br />contentEl :'localElement',//載入本地資源<br />bodyStyle:'background-color:#FFFFFF'//設定面板體的背景色<br />})<br /> 本地資源<br /><table border=1 id='localElement'><br /><tr><th colspan=2>本地資源---員工列表</th></tr><br /><tr><br /><th width = 60>序號</th><th width = 80>姓名</th><br /><tr><br /><tr><td>1</td><td>張三</td></tr><br /><tr><td>2</td><td>李四</td></tr><br /><tr><td>3</td><td>王五</td></tr><br /><tr><td>4</td><td>趙六</td></tr><br /><tr><td>5</td><td>陳七</td></tr><br /><tr><td>6</td><td>楊八</td></tr><br /><tr><td>7</td><td>劉九</td></tr><br /></table></p><p>使用html配置項定義面板panel內容<br />var htmlArray = [<br />'<table border=1>',<br />'<tr><td colspan=2>員工列表</td></tr>',<br />'<tr><th width = 60>序號</th><th width = 80>姓名</th><tr>',<br />'<tr><td>1</td><td>張三</td></tr>',<br />'<tr><td>2</td><td>李四</td></tr>',<br />'<tr><td>3</td><td>王五</td></tr>',<br />'<tr><td>4</td><td>趙六</td></tr>',<br />'<tr><td>5</td><td>陳七</td></tr>',<br />'<tr><td>6</td><td>楊八</td></tr>',<br />'<tr><td>7</td><td>劉九</td></tr>',<br />'</table>'<br /> ];<br />var panel = new Ext.Panel({<br />title:'使用html配置項自訂面板內容',<br />height:150,//設定面板的高度<br />width:250,//設定面板的寬度<br />frame:true,//渲染面板<br />collapsible : true,//允許展開和收縮<br />autoScroll : true,//自動顯示捲軸<br />applyTo :'panel',<br />html:htmlArray.join(''),<br />bodyStyle:'background-color:#FFFFFF'//設定面板體的背景色<br />})</p><p>使用items添加panel內容<br />var panel = new Ext.Panel({<br />header : true,<br />title:'日曆',<br />frame:true,//渲染面板<br />collapsible : true,//允許展開和收縮<br />autoHeight : true,//自動高度<br />width : 189,//固定寬度<br />applyTo :'panel',<br />items: new Ext.DatePicker()//向面板中添加一個日期組件<br />})</p><p>面板panel嵌套的使用</p><p>var panel = new Ext.Panel({<br />header : true,<br />title:'使用items進行面板嵌套',<br />frame:true,//渲染面板<br />collapsible : true,//允許展開和收縮<br />height : 200,<br />width : 250,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF',//設定面板體的背景色<br />height : 80,//子面板高度為80<br />collapsible : true,//允許展開和收縮<br />autoScroll : true//自動顯示捲軸<br />},<br />items: [<br />new Ext.Panel({<br />title : '嵌套面板一',<br />contentEl : 'localElement'//載入本地資源<br />}),<br />new Ext.Panel({<br />title : '嵌套面板二',<br />autoLoad : 'page1.html'//載入遠程頁面<br />})<br />]<br />})</p><p>FitLayout布局panel</p><p>var panel = new Ext.Panel({<br />layout : 'fit',<br />title:'Ext.layout.FitLayout布局樣本',<br />frame:true,//渲染面板<br />height : 150,<br />width : 250,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF'//設定面板體的背景色<br />},<br />//面板items配置項預設的xtype類型為panel，<br />//該預設值可以通過defaultType配置項變更<br />items: [<br />{<br />title : '嵌套面板一',<br />html : '面板一'<br />},<br />{<br />title : '嵌套面板二',<br />html : '面板二'<br />}<br />]<br />})</p><p>layout.Accordion布局panel<br />var panel = new Ext.Panel({<br />layout : 'accordion',<br />layoutConfig : {<br />activeOnTop : true,//設定開啟的子面板置頂<br />fill : true,//子面板充滿父面板的剩餘空間<br />hideCollapseTool: false,//顯示“展開收縮”按鈕<br />titleCollapse : true,//允許通過點擊子面板的標題來展開或收縮面板<br />animate:true//使用動畫效果<br />},<br />title:'Ext.layout.Accordion布局樣本',<br />frame:true,//渲染面板<br />height : 150,<br />width : 250,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面板體的背景色<br />},<br />items: [<br />{<br />title : '嵌套面板一',<br />html : '說明一'<br />},<br />{<br />title : '嵌套面板二',<br />html : '說明二'<br />}<br />,<br />{<br />title : '嵌套面板三',<br />html : '說明三'<br />}<br />]<br />})</p><p>layout.CardLayout布局panel<br />var panel = new Ext.Panel({<br />layout : 'card',<br />activeItem : 0,//設定預設顯示第一個子面板<br />title:'Ext.layout.CardLayout布局樣本',<br />frame:true,//渲染面板<br />height : 150,<br />width : 250,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面板體的背景色<br />},<br />items: [<br />{<br />title : '嵌套面板一',<br />html : '說明一',<br />id : 'p1'<br />},<br />{<br />title : '嵌套面板二',<br />html : '說明二',<br />id : 'p2'<br />}<br />,<br />{<br />title : '嵌套面板三',<br />html : '說明三',<br />id : 'p3'<br />}<br />],<br />buttons:[<br />{<br />text : '上一頁',<br />handler : changePage<br />},<br />{<br />text : '下一頁',<br />handler : changePage<br />}<br />]<br />})<br />//切換子面板<br />function changePage(btn){<br />var index = Number(panel.layout.activeItem.id.substring(1));<br />if(btn.text == '上一頁'){<br />index -= 1;<br />if(index < 1){<br />index = 1;<br />}<br />}else{<br />index += 1;<br />if(index > 3){<br />index = 3;<br />}<br />}<br />panel.layout.setActiveItem('p'+index);<br />}</p><p>layout.AnchorLayout布局panel<br />var panel = new Ext.Panel({<br />layout : 'anchor',<br />title:'Ext.layout.AnchorLayout布局樣本',<br />frame:false,//渲染面板<br />height : 150,<br />width : 300,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF;padding:15px'//設定面板體的背景色<br />},<br />items: [<br />{<br />anchor : '50% 50%',//設定子面板的寬高為父面板的50%<br />title : '子面板'<br />}<br />]<br />})<br /> 或者：<br /> items: [<br />{<br />anchor : '-10 -10',//設定子面板的寬高位移父面板10像素<br />title : '子面板'<br />}<br />]</p><p> 或者：<br />items: [<br />{<br />anchor : 'r b',//相對於父容器的右邊和底邊的差值進行定位<br />width : 200,<br />height : 100,<br />title : '子面板'<br />}<br />]</p><p> 或者：<br />items: [<br />{<br />x : '10%',//橫座標為距父容器寬度10%的位置<br />y : 10,//縱座標為距父容器上邊緣10像素的位置<br />width : 100,<br />height : 50,<br />title : '子面板一'<br />},<br />{<br />x : 90,//橫座標為距父容器左邊緣90像素的位置<br />y : 70,//縱座標為距父容器上邊緣70像素的位置<br />width : 100,<br />height : 50,<br />title : '子面板二'<br />}<br />]</p><p>layout.FormLayout布局panel<br />var panel = new Ext.Panel({<br />title:'Ext.layout.FormLayout布局樣本',<br />layout : 'form',<br />labelSeparator : '：',//在容器中指定分隔字元<br />frame:true,//渲染面板<br />height : 110,<br />width : 300,<br />applyTo :'panel',<br />defaultType: 'textfield',//指定容器子項目預設的xtype類型為textfield<br />defaults : {//設定預設屬性<br />msgTarget: 'side'//指定預設的錯誤資訊提示方式<br />},<br />items: [<br />{<br />fieldLabel:'使用者名稱',<br />allowBlank : false<br />},<br />{<br />fieldLabel:'密碼',<br />allowBlank : false<br />}<br />]<br />})</p><p>layout.ColumnLayout布局panel<br />var panel = new Ext.Panel({<br />title:'Ext.layout.ColumnLayout布局樣本',<br />layout : 'column',<br />frame:true,//渲染面板<br />height : 150,<br />width : 250,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF;',//設定面板體的背景色<br />frame : true<br />},<br />items: [<br />{<br />title:'子面板一',<br />width:100,//指定列寬為100像素<br />height : 100<br />},<br />{<br />title:'子面板二',<br />width:100,//指定列寬為100像素<br />height : 100<br />}<br />]<br />})</p><p> 或者：<br />items: [<br />{<br />title:'子面板一',<br />columnWidth:.3,//指定列寬為容器寬度的30%<br />height : 100<br />},<br />{<br />title:'子面板二',<br />columnWidth:.7,//指定列寬為容器寬度的70%<br />height : 100<br />}<br />]</p><p> 或者：<br />items: [<br />{<br />title:'子面板一',<br />width : 100,//指定列寬為100像素<br />height : 100<br />},<br />{<br />title:'子面板二',<br />width : 100,<br />columnWidth:.3,//指定列寬為容器剩餘寬度的30%<br />height : 100<br />},<br />{<br />title:'子面板三',<br />columnWidth:.7,//指定列寬為容器剩餘寬度的70%<br />height : 100<br />}<br />]</p><p>layout.TableLayout布局panel<br />var panel = new Ext.Panel({<br />title:'Ext.layout.TableLayout布局樣本',<br />layout : 'table',<br />layoutConfig : {<br />columns : 4 //設定表格版面配置預設列數為4列<br />},<br />frame:true,//渲染面板<br />height : 150,<br />applyTo :'panel',<br />defaults : {//設定預設屬性<br />bodyStyle:'background-color:#FFFFFF;',//設定面板體的背景色<br />frame : true,<br />height : 50<br />},<br />items: [<br />{<br />title:'子面板一',<br />colspan : 3//設定跨列<br />},<br />{<br />title:'子面板二',<br />rowspan : 2,//設定跨行<br />height : 100<br />},<br />{title:'子面板三'},<br />{title:'子面板四'},<br />{title:'子面板五'}<br />]<br />})</p><p>layout.BorderLayout布局panel<br />var panel = new Ext.Panel({<br />title : 'Ext.layout.BorderLayout布局樣本',<br />layout:'border',//表格版面配置<br />height : 250,<br />width : 400,<br />applyTo : 'panel',<br />items: [<br />{<br />title: 'north Panel',<br />html : '上邊',<br />region: 'north',//指定子面板所在地區為north<br />height: 50<br />},<br />{<br />title: 'South Panel',<br />html : '下邊',<br />region: 'south',//指定子面板所在地區為south<br />height: 50<br />},{<br />title: 'West Panel',<br />html : '左邊',<br />region:'west',//指定子面板所在地區為west<br />width: 100<br />},{<br />title: 'east Panel',<br />html : '右邊',<br />region:'east',//指定子面板所在地區為east<br />width: 100<br />},{<br />title: 'Main Content',<br />html : '中間',<br />region:'center'//指定子面板所在地區為center<br />}]<br />});</p><p>Ext.Viewport布局樣本<br />new Ext.Viewport({<br />title : 'Ext.Viewport樣本',<br />layout:'border',//表格版面配置<br />items: [<br />{<br />title: 'north Panel',<br />html : '上邊',<br />region: 'north',//指定子面板所在地區為north<br />height: 100<br />},{<br />title: 'West Panel',<br />html : '左邊',<br />region:'west',//指定子面板所在地區為west<br />width: 150<br />},{<br />title: 'Main Content',<br />html : '中間',<br />region:'center'//指定子面板所在地區為center<br />}]<br />});</p><p>Ext.TabPanel 標籤頁樣本<br />var tabPanel = new Ext.TabPanel({<br />height : 150,<br />width : 300,<br />activeTab : 0,//預設啟用第一個tab頁<br />animScroll : true,//使用動畫滾動效果<br />enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕<br />applyTo : 'panel',<br />items: [<br />{title: 'tab標籤頁1',html : 'tab標籤頁1內容'},<br />{title: 'tab標籤頁2',html : 'tab標籤頁2內容'},<br />{title: 'tab標籤頁3',html : 'tab標籤頁3內容'},<br />{title: 'tab標籤頁4',html : 'tab標籤頁4內容'},<br />{title: 'tab標籤頁5',html : 'tab標籤頁5內容'}<br />]<br />});</p><p>Ext.TabPanel(轉換div)樣本</p><p> <mce:script type="text/javascript"><!--<br />Ext.onReady(function(){<br />Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';<br />var tabPanel = new Ext.TabPanel({<br />height : 50,<br />width : 300,<br />autoTabs : true,//自動掃描頁面中的div然後將其轉換為標籤頁<br />deferredRender : false,//不進行延時渲染<br />activeTab : 0,//預設啟用第一個tab頁<br />animScroll : true,//使用動畫滾動效果<br />enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕<br />applyTo : 'panel'<br />});<br />});</p><p>// --></mce:script><br /> </HEAD><br /> <BODY><br /><table width = 100%><br /><tr><td> <td></tr><br /><tr><td width=100></td><td><br /><div id='panel'><br /><div class='x-tab' title='tab標籤頁1'>tab標籤頁1內容</div><br /><div class='x-tab' title='tab標籤頁2'>tab標籤頁2內容</div><br /><div class='x-tab' title='tab標籤頁3'>tab標籤頁3內容</div><br /><div class='x-tab' title='tab標籤頁4'>tab標籤頁4內容</div><br /><div class='x-tab' title='tab標籤頁5'>tab標籤頁5內容</div><br /></div><br /><div class='x-tab' title='tab標籤頁6'>tab標籤頁6內容</div><br /><td></tr><br /></table><br /> </BODY><br /></HTML></p><p>Ext.TabPanel樣本（動態添加tab頁）<br />var tabPanel = new Ext.TabPanel({<br />height : 150,<br />width : 300,<br />activeTab : 0,//預設啟用第一個tab頁<br />animScroll : true,//使用動畫滾動效果<br />enableTabScroll : true,//tab標籤超寬時自動出現滾動按鈕<br />applyTo : 'panel',<br />resizeTabs : true,<br />tabMargin : 50,<br />tabWidth : 100,<br />items : [<br />{title: 'tab標籤頁1',html : 'tab標籤頁1內容'}<br />],<br />buttons : [<br />{<br />text : '添加標籤頁',<br />handler : addTabPage<br />}<br />]<br />});<br />function addTabPage(){<br />var index = tabPanel.items.length + 1;<br />var tabPage = tabPanel.add({//動態添加tab頁<br />title: 'tab標籤頁'+index,<br />html : 'tab標籤頁'+index+'內容',<br />closable : true//允許關閉<br />})<br />tabPanel.setActiveTab(tabPage);//設定當前tab頁<br />}</p><p>布局嵌套實現表單橫排</p><p>var form = new Ext.form.FormPanel({<br />title:'通過布局嵌套實現表單橫排',<br />labelSeparator :'：',//分隔字元<br />labelWidth : 50,//標籤寬度<br />bodyStyle:'padding:5 5 5 5',//表單邊距<br />frame : false,<br />height:150,<br />width:250,<br />applyTo :'form',<br />items:[<br />{<br />xtype : 'panel',<br />layout : 'column',//嵌套列布局<br />border : false,//不顯示邊框<br />defaults : {//應用到每一個子項目上的配置<br />border : false,//不顯示邊框<br />layout : 'form',//在列布局中嵌套form布局<br />columnWidth : .5//列寬<br />},<br />items : [<br />{<br />labelSeparator :'：',//分隔字元<br />items : {<br />xtype : 'radio',<br />name : 'sex',//名字相同的單選框會作為一組<br />fieldLabel:'性別',<br />boxLabel : '男'<br />}<br />},<br />{<br />items : {<br />xtype : 'radio',<br />name : 'sex',//名字相同的單選框會作為一組<br />hideLabel:true,//橫排後隱藏標籤<br />boxLabel : '女'<br />}<br />}<br />]<br />},<br />{<br />xtype : 'panel',<br />layout : 'column',//嵌套列布局<br />border : false,//不顯示邊框<br />defaults : {//應用到每一個子項目上的配置<br />border : false,//不顯示邊框<br />layout : 'form',//在列布局中嵌套form布局<br />columnWidth : .5//列寬<br />},<br />items : [<br />{<br />labelSeparator :'：',//分隔字元<br />items : {<br />xtype : 'checkbox',<br />name : 'swim',<br />fieldLabel:'愛好',<br />boxLabel : '遊泳'<br />}<br />},<br />{<br />items : {<br />xtype : 'checkbox',<br />name : 'walk',<br />hideLabel:true,//橫排後隱藏標籤<br />boxLabel : '散步'<br />}<br />}<br />]<br />}<br />]<br />})