|
復制代碼 代碼如下:
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
width:400,
height:200,
layout:"column",
items:[{columnWidth:.5,
title:"面板1"},
{columnWidth:.5,
title:"面板2"}]
});
});
上面的代碼我們創建了一個面板Panel,Panle是一個容器組件,我們使用layout指定該面板使用Column布局。該面板的子元素是兩個面板,這兩個面板都包含了一個與列布局相關的配置參數屬性columnWidth,他們的值都是0.5,也就是每一個面板占一半的寬度。執行上面的程序生成如下圖所示的結果:

Ext中的一些容器組件都已經指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我們在使用這些組件的時候,不能給這些容器組件再指定另外的布局。
ExtJS2.0一共包含十種布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我們分別對這幾種布局作簡單的介紹。
JavaScript技術:ExtJS 2.0 實用簡明教程之布局概述,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。