第六講：ExtJS佈局方式
示例一：兩個嵌套子面板。
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一" }), new Ext.Panel({ width:200, height:100, title:"面板二" }) ] }) } ); |
ContainerLayout容器佈局
Ext.layout.ContainerLayout提供了所有佈局類的基本功能，它沒有可視化的外觀，只是提供容器作爲佈局的基本邏輯，這個類通常被擴展而不通過new關鍵字直接創建。
如果面板（panel）沒有指定任何佈局類，則它將會作爲默認佈局來創建
Fit佈局，用於嵌套佈局時使之自適應容器大小，通常用於菜單，表單等的嵌套佈局。 Fit佈局顧名思義，Fit即“自適應”的意思，通常使用在我們進行嵌套佈局的時候使用。
示例二：使用Fit佈局。
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, layout:"fit", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一" }), new Ext.Panel({ width:200, height:100, title:"面板二" }) ] }) } ); |
Accordion佈局由類Ext.layout.Accordion定義，名稱爲accordion，表示可摺疊的佈局，也就是說使用該佈局的容器組件中的子元素是可摺疊的形式。
示例三：Accordion佈局
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, layout:"accordion", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一", html:"面板一內容" }), new Ext.Panel({ width:200, height:100, title:"面板二", html:"面板二內容" }) ] }) } ); |
Card佈局由Ext.layout.CardLayout類定義，名稱爲card，該佈局將會在容器組件中某一時刻使得只顯示一個子元素。可以滿足安裝嚮導、Tab選項板等應用中面板顯示的需求。
示例四：Card佈局
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"card", activeItem:0, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ width:200, height:100, title:"面板一", html:"面板一內容" }), new Ext.Panel({ width:200, height:100, title:"面板二", html:"面板二內容" }) ], buttons:[ new Ext.Button({text:"上一頁",handler:changePage}), new Ext.Button({text:"下一頁",handler:changePage}) ] })
function changePage(btn) { var index = Number(panel.layout.activeItem.id.substring(12)); if(btn.text == '上一頁'){ index -= 1; if(index < 1){ index = 1; } }else{ index += 1; if(index > 2){ index = 2; } } panel.layout.setActiveItem('ext-comp-100'+index); } } ); |
AnchorLayout是最簡單的佈局管理器，它只是將元素按照配置的屬性在元素容器中進行定位。
示例五：Anchor佈局之按比例顯示子面板
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"50% 50%", title:"面板一", html:"面板一內容" }), new Ext.Panel({ anchor:"50% 50%", title:"面板二", html:"面板二內容" }) ] }) } ); |
示例六：設置子面板偏移父面板的偏移量
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"anchor", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ anchor:"-100 -100", title:"面板一", html:"面板一內容" }) ] }) } ); |
AbsoluteLayout佈局擴展自Ext.layout.AnchorLayout佈局，對應面板佈局（layout）配置項的名稱爲absolute。它可以根據子面板中配置的x/y座標進行定位，並且座標值支持使用固定值和百分比兩種形式。
示例七：使用固定值進行定位。
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"absolute", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ x:10, y:10, width:200, height:100, title:"面板一", html:"面板一內容" }) ] }) } ); |
示例八：使用百分比進行定位。
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"absolute", width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ new Ext.Panel({ x:'10%', y:'10%', width:200, height:100, title:"面板一", html:"面板一內容" }) ] }) } ); |
Form佈局由類Ext.layout.FormLayout定義，名稱爲form，是一種專門用於管理表單中輸入字段的佈局，這種佈局主要用於在程序中創建表單字段或表單元素等使用。
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right", items:[ new Ext.form.TextField({ fieldLabel:'用戶名', allowBlank : false }), new Ext.form.TextField({ fieldLabel:'密碼', allowBlank : false }) ] }) } ); |
省略寫法
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"form", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, labelAlign:"right", defaultType:'textfield', items:[ { fieldLabel:'用戶名', allowBlank : false }, { fieldLabel:'密碼', allowBlank : false } ] }) } ); |
Column列布局由Ext.layout.ColumnLayout類定義，名稱爲column。列布局把整個容器組件看成一列，然後往裏面放入子元素的時候，可以通過在子元素中指定使用columnWidth或width來指定子元素所佔的列寬度。columnWidth表示使用百分比的形式指定列寬度，而width則是使用絕對象素的方式指定列寬度，在實際應用中可以混合使用兩種方式。
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"column", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items:[ { title:'子面板一', columnWidth:.2, height : 100 }, { title:'子面板二', columnWidth:.2, height : 100 }, { title:'子面板三', columnWidth:.2, height : 100 }, { title:'子面板四', columnWidth:.2, height : 100 }, { title:'子面板五', columnWidth:.2, height : 100 }
] }) } ); |
Ext.layout.TableLayout對應面板佈局layout配置項的名稱爲table。這種比較允許你非常容易的渲染內容到HTML表格中，可以指定列數（columns），跨行（rowspan），跨列（colspan），可以創建出複雜的表格佈局。必須使用layoutConfig屬性來指定屬於此佈局的配置，table佈局僅有唯一的佈局配置項columns，而包含在其中的子面板會具有rowspan和colspan兩個配置項！
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"table", layoutConfig : { columns : 4 //設置表格佈局默認列數爲4列 }, width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title:'子面板一', colspan : 3//設置跨列 }, { title:'子面板二', rowspan : 2,//設置跨行 height : 100 }, {title:'子面板三'}, {title:'子面板四'}, {title:'子面板五'} ] }) } ); |
這個東西南北中的佈局方式，和easyUI中我遇到的一個項目很很相似！
Border佈局由類Ext.layout.BorderLayout定義，佈局名稱爲border。該佈局把容器分成東南西北中五個區域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素所在的位置，Border佈局會自動把子元素放到佈局指定的位置。
|
Ext.onReady( function() { var panel = new Ext.Panel({ renderTo:hello, layout:"border", width:300, height:300, title:"我是Panel", autoScroll:true, collapsible:true, items: [ { title: 'north Panel', html : '上邊', region: 'north',//指定子面板所在區域爲north height: 50 }, { title: 'South Panel', html : '下邊', region: 'south',//指定子面板所在區域爲south height: 50 },{ title: 'West Panel', html : '左邊', region:'west',//指定子面板所在區域爲west width: 100 },{ title: 'east Panel', html : '右邊', region:'east',//指定子面板所在區域爲east width: 100 },{ title: 'Main Content', html : '中間', region:'center'//指定子面板所在區域爲center }] }) } ); |