快捷導(dǎo)航

ExtJS 2.0 實(shí)用簡(jiǎn)明教程之布局概述

更新時(shí)間：2009年04月29日 14:36:17 作者：

所謂布局就是指容器組件中子元素的分布、排列組合方式。Ext的所有容器組件都支持而局操作，每一個(gè)容器都會(huì)有一個(gè)對(duì)應(yīng)的布局，布局負(fù)責(zé)管理容器組件中子元素的排列、組合及渲染方式等。

ExtJS的布局基類為Ext.layout.ContainerLayout，其它布局都是繼承該類。ExtJS的容器組件包含一個(gè)layout及l(fā)ayoutConfig配置屬性，這兩個(gè)屬性用來(lái)指定容器使用的布局及布局的詳細(xì)配置信息，如果沒有指定容器組件的layout則默認(rèn)會(huì)使用ContainerLayout作為布局，該布局只是簡(jiǎn)單的把元素放到容器中，有的布局需要layoutConfig配置，有的則不需要layoutConfig配置?？创a：

復(fù)制代碼代碼如下:

Ext.onReady(function(){ 
new Ext.Panel({ 
renderTo:"hello", 
width:400, 
height:200, 
layout:"column", 
items:[{columnWidth:.5, 
title:"面板1"}, 
{columnWidth:.5, 
title:"面板2"}] 
}); 
});

上面的代碼我們創(chuàng)建了一個(gè)面板Panel，Panle是一個(gè)容器組件，我們使用layout指定該面板使用Column布局。該面板的子元素是兩個(gè)面板，這兩個(gè)面板都包含了一個(gè)與列布局相關(guān)的配置參數(shù)屬性columnWidth，他們的值都是0.5，也就是每一個(gè)面板占一半的寬度。執(zhí)行上面的程序生成如下圖所示的結(jié)果：

Ext中的一些容器組件都已經(jīng)指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我們?cè)谑褂眠@些組件的時(shí)候，不能給這些容器組件再指定另外的布局。
ExtJS2.0一共包含十種布局，常用的布局有border、column、fit、form、card、tabel等布局，下面我們分別對(duì)這幾種布局作簡(jiǎn)單的介紹。

您可能感興趣的文章: