ExtJS 2.0實(shí)用簡(jiǎn)明教程之Border區(qū)域布局

更新時(shí)間：2009年04月29日 13:27:33 作者：

Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。

該布局把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來(lái)表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Border布局會(huì)自動(dòng)把子元素放到布局指定的位置?？聪旅娴拇a：

復(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í)行上面的代碼將會(huì)在頁(yè)面中輸出包含上下左右中五個(gè)區(qū)域的面板，如下圖所示：

相關(guān)文章

EXTJS記事本當(dāng)CompositeField遇上RowEditor
用RowEditor作批量編輯器時(shí)，遇到一個(gè)問(wèn)題，想要在Roweditor中使用三個(gè)下拉列表組成級(jí)聯(lián)式選擇控件
2011-07-07
ExtJS的拖拽效果示例
拖拽效果想必大家都有見(jiàn)到過(guò)吧，實(shí)現(xiàn)方式大同小異，在接下來(lái)的文章中為大家詳細(xì)介紹下使用ExtJS是如何做到的
2013-12-12
將list轉(zhuǎn)換為json失敗的原因
如何用的hibernate的自動(dòng)注解，并且里面有一對(duì)多，多對(duì)一的關(guān)系，這是需要在不需要的字段上加上注解@JsonIgnore
2013-12-12
ExtJS 簡(jiǎn)介讓你知道extjs是什么
ExtJS是一個(gè)Ajax框架，是一個(gè)用javascript寫的，用于在客戶端創(chuàng)建豐富多彩的web應(yīng)用程序界面。ExtJS可以用來(lái)開(kāi)發(fā)RIA也即富客戶端的AJAX應(yīng)用
2008-12-12
Extjs中ComboBoxTree實(shí)現(xiàn)的下拉框樹(shù)效果(自寫)
最近涉及到的一個(gè)項(xiàng)目中，需要實(shí)現(xiàn)ComboBoxTree的效果，由于在Extjs中是沒(méi)有這種效果，所以看看別人的資料自己寫了一個(gè)，感興趣的朋友可以參考下哈
2013-05-05
ANT 壓縮(去掉空格/注釋)JS文件可提高js運(yùn)行速度
在解決這個(gè)有很多優(yōu)化方法，今天來(lái)說(shuō)其中一種，那就是在Ant腳本打包的時(shí)候，把js中空格、注釋去掉、以及合并，合并今天不說(shuō)了，還未實(shí)現(xiàn)這個(gè)，在研究中
2013-04-04
Extjs中DisplayField的日期或者數(shù)字格式化擴(kuò)展
在用Extjs的時(shí)候，有時(shí)需要對(duì) Ext.form.DisplyField 進(jìn)行格式化。
2010-09-09
ExtJs 實(shí)現(xiàn)動(dòng)態(tài)加載grid完整示例
動(dòng)態(tài)加載grid在ExtJs中如何實(shí)現(xiàn)，貌似有很多的朋友都不知道吧，下面有個(gè)不錯(cuò)的示例，希望對(duì)大家有所幫助
2013-09-09
ExtJS4 表格的嵌套 rowExpander應(yīng)用
今天做一個(gè)grid，里面的數(shù)據(jù)需要帶明細(xì)，思來(lái)想去還是搞個(gè)表格嵌套吧,需要的朋友可以參考下
2014-05-05
Extjs優(yōu)化(二)Form表單提交通用實(shí)現(xiàn)
本文就將演示下一個(gè)實(shí)例使用該代碼只需要13行代碼原始需要25-30行代碼搞定，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-04-04