這份教程目的在于對(duì)TabPanel類進(jìn)行一次快速介紹。所提及的知識(shí)都是來(lái)自我對(duì)TabPanel范例、Ext源碼和API文檔的學(xué)習(xí)。到本文最后，你應(yīng)該完成好一個(gè)Tab Panel，這個(gè)TabPanel能夠：
我們將會(huì)用下列HTML，和Ext一齊構(gòu)建一個(gè)基本的結(jié)構(gòu)。復(fù)制這些內(nèi)容到一個(gè)叫tptut.heml的文件，并要求是運(yùn)行在服務(wù)端的，當(dāng)然 也要保證ext-all.css, ext-base.js, 和 ext-all.js這些Ext安裝路徑的正確。然后按照以下步驟創(chuàng)建tab_actions.js:
<html>
<head>
<title>TabPanel教程</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css" href="../include/ext2/resources/css/ext-all.css" />
<script type="text/javascript" src="../include/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/ext2/ext-all.js"></script>
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<style>
#actions li {
margin:.3em;
}
#actions li a {
color:#666688;
text-decoration:none;
} </style>
</head>
<body>
<ul id="actions" class="x-hidden">
<li>
<a id="use" href="#">Use Existing Tab</a>
</li>
<li>
<a id="create" href="#">Create New Tab</a>
</li>
</ul>
<div id="tabs"></div>
</body>
</html>
以上代碼有兩個(gè)地方的元素需要注意。我們將使用"actions"(動(dòng)作列表)這種簡(jiǎn)易的實(shí)現(xiàn)來(lái)執(zhí)行tab的創(chuàng)建。"tabs"的那個(gè)div將用于Tab面板中第一個(gè)默認(rèn)tab的容器。
在剛才那個(gè)目錄中創(chuàng)建一個(gè)文文件。就叫做作tab_actions.js，加入下面JavaScript:
Ext.onReady(function(){
// 包含actions的菜單
var tabActions = new Ext.Panel({
frame:true,
title: 'Actions',
collapsible:true,
contentEl:'actions',
titleCollapse: true
});
// 保持actions菜單的父面板
var actionPanel = new Ext.Panel({
id:'action-panel',
region:'west',
split:true,
collapsible: true,
collapseMode: 'mini',
width:200,
minWidth: 150,
border: false,
baseCls:'x-plain',
items: [tabActions]
});
// 主面板（已有tab）
var tabPanel = new Ext.TabPanel({
region:'center',
deferredRender:false,
autoScroll: true,
margins:'0 4 4 0',
activeTab:0,
items:[{
id:'tab1',
contentEl:'tabs',
title: 'Main',
closable:false,
autoScroll:true
}]
});
// 配置視圖viewport
viewport = new Ext.Viewport({
layout:'border',
items:[actionPanel,tabPanel]});
});
上面的代碼被套上一個(gè)Ext.onReady的函數(shù),以防止頁(yè)面元素未全部加載就執(zhí)行代碼了。接著要做的事情是將我們的動(dòng)作列表（Action list）轉(zhuǎn)換到名字為tabActions的那個(gè)面板，該命名是由contentEl (content element)（內(nèi)容元素）這個(gè)配置項(xiàng)參數(shù)所指定的。
接著，創(chuàng)建一個(gè)父面板actionPanel來(lái)保持菜單面板。我們已tabActions 作為一個(gè)item項(xiàng)的參數(shù)。由于actionPanel會(huì)由視圖Viewport的LayoutManager來(lái)頁(yè)面定位，所以我們須在配置項(xiàng)對(duì)象中指定一個(gè)區(qū)域。
第三個(gè)步驟是創(chuàng)建TabPanel(Tab面板)本身。我們想在頁(yè)面居中，即是對(duì)應(yīng)于視圖的中部。還要將一系列的tab配置項(xiàng)對(duì)象參數(shù)傳入到面板中。在這里例子中,參與內(nèi)置渲染的只有一個(gè)tab，但是多個(gè)也是可以的。如能確定每個(gè)面板在頁(yè)面上能夠被當(dāng)作容器使用，便可以成為該數(shù)組的元素。像當(dāng)前的情況，我們是把tabs作為第一個(gè)面板的內(nèi)容元素。 要注意，我們這指出了tab的Id。這就是我們稍后獲取的tab的依據(jù)。
最后，我們?cè)O(shè)置視圖， 用于瀏覽器可視區(qū)域的控制。 所需要做的就是指定一個(gè)布局（layout）和什么要顯示的組件。組件已經(jīng)由視圖的LayoutMangager（視圖管理器）配置好適合放置的區(qū)域。
這時(shí)，你應(yīng)該在瀏覽器觀察到，包含Acitons菜單的兩個(gè)格式化列在左邊，tab面板占據(jù)了屏幕的其余位置。
新聞熱點(diǎn)
疑難解答
圖片精選
