ExtJS 2.0實(shí)用簡明教程 之Border區(qū)域布局
更新時(shí)間：2009年04月29日 13:27:33 作者：
Border布局由類Ext.layout.BorderLayout定義，布局名稱為border。
該布局把容器分成東南西北中五個(gè)區(qū)域，分別由east，south, west，north, cente來表示，在往容器中添加子元素的時(shí)候，我們只需要指定這些子元素所在的位置，Border布局會(huì)自動(dòng)把子元素放到布局指定的位置。看下面的代碼：
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ì)在頁面中輸出包含上下左右中五個(gè)區(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í)行上面的代碼將會(huì)在頁面中輸出包含上下左右中五個(gè)區(qū)域的面板，如下圖所示：
相關(guān)文章
導(dǎo)入extjs、jquery 文件時(shí)$使用沖突問題解決方法
在html頁面中，沒有導(dǎo)入jquery文件時(shí)，可以正常保存，而導(dǎo)入jquery文件后，則不能不存了，發(fā)現(xiàn)導(dǎo)入的jquery文件和現(xiàn)有的extjs文件沖突了2014-01-01
用extjs實(shí)現(xiàn)的集成fckeditor的代碼。2009-05-05
關(guān)于extjs4如何獲取grid修改后的數(shù)據(jù)的問題
如何獲取grid修改后的數(shù)據(jù)問題，下面是API的描述?？梢垣@取各種值，感興趣的朋友可以參考下2013-08-08
ExtJS 2.0實(shí)用簡明教程 之ExtJS版的Hello
下面我們寫一個(gè)最簡單的ExtJS應(yīng)用，在hello.html文件中輸入下面的代碼2009-04-04
Extjs4 GridPanel的主要配置參數(shù)詳細(xì)介紹
主要配置項(xiàng)：store：表格的數(shù)據(jù)集、columns：表格列模式的配置數(shù)組，可自動(dòng)創(chuàng)建ColumnModel列模式等等2013-04-04
接下來為大家介紹下GridPanel的幾種樣式及選擇模式分類介紹，感興趣的朋友可以參考下哈2013-04-04
ExtJs 學(xué)習(xí)筆記 Ext.Panle Ext.TabPanel Ext.Viewport
ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)2008-12-12
Extjs列表詳細(xì)信息窗口新建后自動(dòng)加載解決方法
有時(shí)候我們?cè)谛陆斜碇械囊豁?xiàng)后需要進(jìn)入立刻進(jìn)入詳細(xì)信息的編輯頁面，為了使得操作簡便，一般設(shè)定自動(dòng)導(dǎo)向。2010-04-04
ExtJS 設(shè)置級(jí)聯(lián)菜單的默認(rèn)值
ExtJS在修改這樣的頁面上賦值是很方便的，在正文中1.2.1代碼中可以看出，一行代碼就可以搞定，但這是對(duì)于普通控件而言，如文本框。對(duì)于ComboBox可沒這么簡單...2010-06-06
本節(jié)主要介紹了extjs 如何給column 加上提示,需要的朋友可以參考下2014-07-07