序言:
筆者用的ExtJs版本:ext-3.2.0
ExtJs常見的佈局方式有:border、form、absolute、column、accordion、table、fit、card、anchor
另外,不常見的佈局有:tab、vbox、hbox
本文所有實例代碼已提供下載,下載鏈接:ExtJs常用佈局--layout詳解實例代碼
簡介:
最常用的邊框佈局——BorderLayout
最簡單的佈局——FitLayout
製作伸縮菜單的佈局——Accordion
實現操作嚮導的佈局——CardLayout
控制位置和大小的佈局——AbsoluteLayout
表單專用的佈局——FormLayout
分列布局——ColumnLayout
表格狀佈局——TabelLayout
BoxLayout——HBox
BoxLayout——VBox
一、border 佈局
簡介:也稱“邊界佈局”、“方位佈局”。該佈局把容器分爲東、南、西、北、中五個區域,分別由east、south、west、north、center表示。我們需要在items中使用region參數來給它定位。
注意:north和south部分只能設置高度(height),west和east部分只能設置寬度(width)。center區域必須有,且它的大小是在其他4個部分設置好以後自動計算出來的,所以不能爲它指定寬度值或高度值。
js代碼:
- var borderPanel = new Ext.Panel({
- renderTo: 'borderDiv',
- layout: 'border',
- tltle: 'Border Layout',
- width: 1000,
- height: 800,
- defaults: {
- collapsible: true, // 支持該區域的展開和摺疊
- split: true, // 支持用戶拖放改變該區域的大小
- bodyStyle: 'padding:15px'
- },
- items: [{
- title: 'Footer-s',
- region: 'south',
- height: 100,
- minSize: 75,
- maxSize: 250,
- html: '這是南邊區域 south'
-
- }, {
- titlr: 'Main Content-c',
- region: 'center',
- collapsible: false,
- html: '這是中間區域 center'
- }, {
- title: 'Navigation-w',
- region: 'west',
- width: 150,
- minSize: 100,
- maxSize: 250,
- html: '這是西邊區域 west'
- }, {
- title: 'North',
- region: 'north',
- height: 100,
- html: '這是北邊區域 north'
- }, {
- title: 'East',
- region: 'east',
- width: 150,
- html: '這是東邊區域 east'
- }]
- });</span>
運行結果:
二、form 佈局
簡介:也稱“表單佈局”。是一種專門用於管理表單中輸入字段的佈局,這種佈局在程序中主要用於創建表單字段或表單元素使用。
注意:它可以是一種佈局樣式,也可以是一個組件。也就是說既可以 layout : ‘form’ 也可以 new Ext.FormPanel 來使用它。區別就是對於 Panel 我們配置了 layout 爲 form ,而對於 FormPanel 它默認的佈局就是form佈局,所以對於習慣於用 Panel 而不習慣用 FormPanel 的朋友儘管用Panel,但是一定要考慮好提交的問題,如果使用 panel 的話,要做提交可是要一個個獲得控件的值的,而 FromPanel 則不需要。
js代碼:
- var formPanel = new Ext.FormPanel({
- renderTo: 'formDiv',
- width: 500,
- height: 300,
- labelWidth: 80,
- defaultType: 'textfield',
- frame: true,
- items: [{
- fieldLabel: '用戶名',
- name: 'username'
- }, {
- fieldLabel: '密碼',
- name: 'password'
- }, {
- fieldLabel: '日期',
- name: 'date',
- xtype: 'datefield',
- }]
- });</span>
運行結果:
三、absolute 佈局
簡介:也稱“絕對定位佈局”。該佈局使用很簡單粗暴,直接給出其x、y值來定位即可。
注意:x、y值是相對其父容器而言,從左上角(0,0)開始計算。
js代碼:
- var absolutePanel = new Ext.Panel({
- renderTo: 'absoluteDiv',
- layout: 'absolute',
- title: 'Absolute Layout',
- width: 500,
- height: 300,
- items: [{
- title: 'panel-1',
- x: 50,
- y: 50,
- html: 'x:50,y:50'
- }, {
- title: 'panel-2',
- x: 100,
- y: 100,
- html: 'x:100,y:100',
- }]
- });</span>
運行結果:
四、column 佈局
簡介:也稱“列布局”。該佈局把整個容器組件看成一列,然後往裏面放入子元素的時候,可以通過子元素制定columnWidth和width來制定列的寬度,columnWidth是按百分比來制定列的寬度,width是按照絕對像素來制定列的寬度。在實際應用中可以兩種混合使用。
注意:該佈局的子面板的所有columnWidth值必須在0~1之間或者是百分比。columnWidth值的總和應該爲1,即100%。另外,如果任何子面板沒有指定columnWidth值,那麼它將佔滿剩餘的空間。
js代碼:
- var columnPanel = new Ext.Panel({
- renderTo: 'columnDiv',
- layout: 'column',
- width: 500,
- height: 300,
- items: [{
- title: 'Width = 25%',
- columWidth: .25,
- html: '111111111111'
- }, {
- title: 'Width = 75%',
- columnWidth: .75,
- html: '111111111111'
- }, {
- title: 'Width = 200px',
- width: 200,
- html: '111111111111'
- }]
- });</span>
運行結果:
五、accordion 佈局
簡介:也稱“可摺疊佈局”、“手風琴佈局”。該佈局的容器的子元素是可摺疊的形式表現。
注意:只有Ext.Panels 和所有Ext.panel.Panel 子項,纔可以使用accordion佈局。
js代碼:
- var accordionPanel = new Ext.Panel({
- renderTo: 'accordionDiv',
- layout: 'accordion',
- title: 'Accordion Layout',
- width: 500,
- height: 300,
- layoutConfig: {animate: false},
- items: [{
- title: 'panel-1', html: 'hello accordion'
- }, {
- title: 'panel-2', html: '<p>段落</p>'
- }, {
- title: 'panel-3', html: '<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a>'
- }, {
- title: 'panel-4', html: '<button>按鈕</button>'
- }]
- });</span>
運行結果:
六、table 佈局
簡介:也稱“表格佈局”。按照普通表格的方法佈局子元素,用 layoutConfig:{columns:3} ,//將父容器分成3列。它的item可配置的參數有:rowspan 合併的行數;colspan 合併的列數。
注意:table佈局本身並沒有什麼特殊功能,它所實現的效果其實完全可以用 border 佈局和 column 佈局等方式代替,而且這些佈局方式更靈活。
js代碼:
- <pre name="code" class="javascript">var tablePanel = new Ext.Panel({
- renderTo: 'tableDiv',
- width: 500,
- height: 300,
- layout: 'table',
- layoutConfig: {columns: 3},//定義了一共要分3列
- items: [
- {title: 'panel-1', html: '1111111111',rowspan:2},//合併了2行
- {title: 'panel-2', html: '2222222222',colspan:2},//合併了2列
- {title: 'panel-3', html: '3333333333'},
- {title: 'panel-4', html: '4444444444'}
- ]
- });
運行結果:
七、fit 佈局
簡介:也稱“自適應佈局”。子元素將自動填滿整個父容器。。
注意:在fit佈局下,對其子元素設置寬度是無效的。如果在fit佈局中放置了多個組件,則只會顯示第一個子元素。
js代碼:
- var fitPanel = new Ext.Panel({
- renderTo: 'fitDiv',
- layout: 'fit',
- width: 500,
- height: 300,
- items: [{
- title: 'Fit Panel',
- html: '111111111111'
- }]
- });</span>
運行結果:
八、card 佈局
簡介:也稱“卡牌佈局”、“卡片式佈局”。該佈局最TMD麻煩了。這種佈局用來管理多個子組件,並且在任何時刻只能顯示一個子組件。這種佈局最常用的情況是嚮導模式,也就是我們所說的分步提交。
注意:由於此佈局本身不提供分步導航功能,所以需要用戶自己開發該功能。可以通過調用 setActiveItem( ) 函數來實現跳轉。由於只有一個面板處於顯示狀態,那麼在初始時,我們可以使用 activeItem: 屬性來指定某一個面板的顯示。對了,如果Ext-4 之後的版本就不是這樣操作了。
js代碼:
- // card佈局所需要的跳轉方法-setActiveItem
- var i=0;
- var navHandler = function(direction){
-
- if (direction == -1){
- i--;
- if (i < 0) { i = 0;}
- }
- if (direction == 1){
- i++;
- if (i > 2) { i = 2; return false;}
- }
- cardPanel.getLayout().setActiveItem(i);
- };
-
- var cardPanel = new Ext.Panel({
- renderTo: 'cardDiv',
- layout: 'card',
- title:'註冊嚮導',
- width: 500,
- height: 300,
- activeItem: 0,
- bodyStyle:'padding:15px',
- defaults:{
- border:false
- },
- bbar: [ {
- id: 'move-prev',
- text: '«Previous',
- handler:navHandler.createDelegate(this,[-1])
- },'->', {
- id: 'move-next',
- text: 'Next »',
- handler:navHandler.createDelegate(this,[1])
- }],
- items: [{
- id: 'card-0',
- html: '<h1>歡迎來到註冊嚮導!</h1><p>Step 1 of 3</p>'
- }, {
- id: 'card-1',
- html: '<h1>請填寫註冊資料!</h1><p>Step 2 of 3</p>'
- }, {
- id: 'card-2',
- html: '<h1>註冊成功!</h1><p>Step 3 of 3 - Complete</p>'
- }]
- });</span>
運行結果:
九、anchor 佈局
簡介:也稱“錨點佈局”。感覺無卵用, anchor佈局將使組件固定於父容器的某一個位置,使用anchor佈局的子組件尺寸相對於容器的尺寸,即父容器容器的大小發生變化時,使用anchor佈局的組件會根據規定的規則重新渲染位置和大小。
注意:anchor屬性爲一組字符串,可以使用百分比或者是-數字(注意前面是有負號的,即數字爲負數)來表示,字符串之間用空格隔開。
js代碼:
- var anchorPanel = new Ext.Panel({
- renderTo: 'anchorDiv',
- layout: 'anchor',
- title: 'Anchor Layout',
- width: 500,
- height: 300,
- items: [{
- title: 'panel-1',
- height: 100,
- anchor: '-50',
- html: '高度等於100,寬度 = 容器寬度 - 50'
- }, {
- title: 'panel-2',
- height: 100,
- anchor: '50%',
- html: '高度等於100,寬度 = 容器寬度的50%'
- },{
- title:'panel-3',
- anchor: '50% 50%',
- html: '高度、寬度 = 容器的50%'
- }]
- });</span>
運行結果:
十、tab 佈局
簡介:也稱“分頁佈局”、“標籤佈局”。
注意:碼字好累,這個佈局你懂得,不多說了。
js代碼:
- var tabPanel = new Ext.TabPanel({
- renderTo: 'tabDiv',
- width: 500,
- height: 300,
- activeTab: 0, // 默認顯示第一個Tab的內容
- defaults: {
- autoScroll: true
- },
- items: [{
- title: 'Tab-0',
- html: "第一個Tab的內容"
- }, {
- title: 'Tab-1',
- html: '我是另一個Tab',
- }, {
- title: 'Tab-2',
- html: '這是一個可以關閉的Tab',
- closable: true
- }]
- });</span>
運行結果:
十一、vbox 佈局
簡介:也稱“豎直佈局”。vertical box ,垂直方向的分行顯示。它的 item 有一個 flex屬性,其值越大,對應的組件就會佔據越大的空間。
注意:無
js代碼:
- var vboxPanel = new Ext.Panel({
- renderTo: 'vboxDiv',
- layout: {
- type: 'vbox',
- align: 'stretch' //拉伸使其充滿整個父容器
- },
- width: 500,
- height: 300,
- items: [{
- title: 'panel-1', html: 'flex:1', flex: 1
- }, {
- title: 'panel-2', html: 'height:150', height: 150
- }, {
- title: 'panel-3', html: 'flex:2', flex: 2
- }]
- });</span>
運行結果:
十二、hbox 佈局
簡介:也稱“水平佈局”。horizontal box ,水平方向的分列顯示。和 vbox 類似,有flex 屬性。
注意:無
js代碼:
- var hbox = new Ext.Panel({
- renderTo: 'hboxDiv',
- layout: {
- type: 'hbox',
- align: 'stretch'
- },
- width: 500,
- height: 300,
- items: [{
- title: 'panel-1', html: 'flex:1', flex: 1
- }, {
- title: 'panel-2', html: 'height:150', width: 150
- }, {
- title: 'panel-3', html: 'flex:2', flex: 2
- }]
- })</span>
運行結果:
總結:
簡單總結起來border佈局一般作爲頁面整體佈局來使用;fit佈局適用於那種需要將子類完全佔滿父類容器的情況;column佈局用於多列;form是一種表單特有佈局方式,實質是一行一控件的形式;table佈局適用多行多列但是有時寬高不太容易控制。而且值得強調的一點就是給一個控件設置layout屬性,其實指的是其內部控件的佈局方式而不是它本身的佈局,這點要搞清楚。
----------------------------------------------------- end -----------------------------------------------------
最後感謝以下鏈接的作者提供的資源參考: