ExtJS 2.0實用簡明教程 之Border區(qū)域布局
更新時間：2009年04月29日 13:27:33 作者：
Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。
該布局把容器分成東南西北中五個區(qū)域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時候，我們只需要指定這些子元素所在的位置，Border布局會自動把子元素放到布局指定的位置?？聪旅娴拇a：
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"頂部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左邊面板"},
{region:"east",
width:100,
title:"右邊面板"}
]
});
});
執(zhí)行上面的代碼將會在頁面中輸出包含上下左右中五個區(qū)域的面板，如下圖所示：
復(fù)制代碼 代碼如下:
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:"頂部面板"},
{region:"south",
height:50,
title:"底部面板"},
{region:"center",
title:"中央面板"},
{region:"west",
width:100,
title:"左邊面板"},
{region:"east",
width:100,
title:"右邊面板"}
]
});
});
執(zhí)行上面的代碼將會在頁面中輸出包含上下左右中五個區(qū)域的面板，如下圖所示：
相關(guān)文章
EXTJS記事本 當(dāng)CompositeField遇上RowEditor
用RowEditor作批量編輯器時，遇到一個問題，想要在Roweditor中使用三個下拉列表組成級聯(lián)式選擇控件2011-07-07
拖拽效果想必大家都有見到過吧，實現(xiàn)方式大同小異，在接下來的文章中為大家詳細介紹下使用ExtJS是如何做到的2013-12-12
如何用的hibernate的自動注解，并且里面有一對多，多對一的關(guān)系，這是需要在不需要的字段上加上注解@JsonIgnore2013-12-12
ExtJS是一個Ajax框架，是一個用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來開發(fā)RIA也即富客戶端的AJAX應(yīng)用2008-12-12
Extjs中ComboBoxTree實現(xiàn)的下拉框樹效果(自寫)
最近涉及到的一個項目中，需要實現(xiàn)ComboBoxTree的效果，由于在Extjs中是沒有這種效果，所以看看別人的資料自己寫了一個，感興趣的朋友可以參考下哈2013-05-05
在解決這個有很多優(yōu)化方法，今天來說其中一種，那就是在Ant腳本打包的時候，把js中空格、注釋去掉、以及合并，合并今天不說了，還未實現(xiàn)這個，在研究中2013-04-04
Extjs中DisplayField的日期或者數(shù)字格式化擴展
在用Extjs的時候，有時需要對 Ext.form.DisplyField 進行格式化。2010-09-09
ExtJs 實現(xiàn)動態(tài)加載grid完整示例
動態(tài)加載grid在ExtJs中如何實現(xiàn)，貌似有很多的朋友都不知道吧，下面有個不錯的示例，希望對大家有所幫助2013-09-09
ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個grid，里面的數(shù)據(jù)需要帶明細，思來想去還是搞個表格嵌套吧,需要的朋友可以參考下2014-05-05
Extjs優(yōu)化(二)Form表單提交通用實現(xiàn)
本文就將演示下一個實例使用該代碼只需要13行代碼 原始需要25-30行代碼搞定，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04