ExtJS常用布局詳解

extjs的容器元件都可以通過設定layout引數來選擇布局改變顯示風格，

它的有效值有：

absolute：控制位置，

accordion：手風琴布局，

anchor：控制大小，

border：邊界式布局，

card：卡片布局，

column：列布局，

fit：填充式布局，

form：表單布局，

table：**式布局

一共9種,在這裡簡單總結一下

absolute：absolute布局的目的是為了擴充套件布局的屬性，使得布局更容易使用

accordion：accordion布局也稱手風琴布局，在accordion布局下，在任何時間裡，只有乙個面板處於啟用狀態。其中每個面板都支援展開和摺疊。注意：只有ext.panels和所有ext.panel.panel子項，才可以使用accordion布局。

ext.onready(function(),
items: [,,]
},]});
});

anchor：

anchor布局將使元件固定于父容器的某一位置，試用anchor布局的子元件尺寸相對於容器的尺寸，即父容器的大小發生變化時，試用anchor布局的元件會根據規定重新渲染位置和大小。

anchorlayout布局沒有任何的直接配置選項（繼承的除外），然而在使用anchorlayout布局時，其子元件都有乙個anchor屬性，用來配置此元件在父容器中所處的位置。

anchor屬性為一組字串，可以使用百分比或者是數字來表示。配置字串使用空格隔開。

ext.onready(function() );
var panel2 = new ext.panel();
var panel3 = new ext.panel();
var win = new ext.window();
win.show();
});

border：邊框布局，他將整個區域分成了東、西、南、北、中五個部分，除了中間部分以外，其他部分都是可以省略的，

border布局也稱邊界布局，他將頁面分隔為west,east,south,north,center這五個部分，我們需要在其items中指定試用region引數為其子元素指定具體位置。注意：north和south部分只能設定高度(height),west和east部分只能設定寬度(width)。north south west east區域變大，center區域就變小了。

引數 split：true 可以調整除了center四個區域的大小。

引數 collapsible：true 將啟用摺疊功能，title必須設定，因為摺疊按鈕是出現標題部分的。

center 區域是必須使用的，而且center區域不允許摺疊。center區域會自動填充其他區域的剩餘空間。尤其在extjs4.0中，當制定布局為border時，沒有指定center區域時，會出現報錯資訊。

ext.onready(function(),,,
,]});});

card：卡片布局，類似於卡片一樣一張張顯示，可以用來實現「嚮導」效果，注意：由於此

布局本身不提供分布導航功能，所以需要用自己開發該功能。由於只有乙個面板處於顯示狀態，那麼在初始時，我們可以試用getnext()或getprev()來得到下乙個或上乙個面板。然後使用setdisabled方法來設定面板的顯示。

ext.onready(function()
} else if (activeid == 'card-1')  else 
} else if (activeid == 'card-2') }};
var viewport = new ext.viewport(,
bbar: [, '->',],
items: [,,]
},]});
});

column：列布局，

這種布局的目的是為了建立乙個多列的格式。其中每列的寬度，可以為其指定乙個百分比或者是乙個固定的寬度。c

olumn布局沒有直接的配置選項（繼承的除外），但column布局支援乙個columnwidth屬性，在布局過程中，試用columnwidth指定每個面板的寬度。

ext.onready(function(),,]
});});

fit：填充式布局，在fit布局中，子元素將自動填滿整個父容器。注意：在fit布局下，對其子元素設定寬度是無效的。如果在fit布局中放置了多個元件，則只會顯示第乙個子元素。典型的案例就是當客戶要求乙個window或panel中放置乙個grid元件，grid元件的大小會隨著父容器的大小改變而改變。

ext.onready(function()]//注意這裡只需要乙個物件
});});

form：表單布局，這個比較簡單，可以認為是元件都是一行乙個

ext.onready(function(), ,]
});});

table：**式布局

ext.onready(function(),
layoutconfig: ,
items: [,,,,,,]
}]});
});

ExtJS常用布局詳解

ExtJS常用布局詳解

CSS 常用布局

css常用布局

ExtJS常用布局詳解

ExtJS常用布局詳解

CSS 常用布局

css常用布局

相關推薦