ExtJS中Panel（面板）使用的非常多，因此在這裏也作爲一個重點來談談吧！
面板（Panel）是一種面向用戶界面構建應用程序最佳的單元塊，一種特定功能和結構化組件。面板包含有底部和頂部的工具條，連同單獨的頭部、底部和body部分。它提供內建都得可展開和可閉合的行爲，連同多個內建的可制定的行爲的工具按鈕。面板可簡易地置入任意的容器或佈局，而面板和渲染管線（rendering pipeline）則由框架完全控制。
下面演示Panel的使用：
panel.js
// 面板的使用
Ext.onReady(function() {
// 創建一個按鈕
var btn = new Ext.Button({
text : "按鈕一"
});
// 創建一個面板
var panel = new Ext.Panel({
title : "我的面板",
width : 500,
height : 500,
// 將面板渲染到body中
renderTo : Ext.getBody(),
// 給工具欄添加按鈕圖標
tools : [ {
id : "save"
}, {
id : "help"
}, {
id : "print",
handler : function() {
window.print();
}
} ],
// collapsible配置項表示指定該面板是否能被收縮和展開true表示爲面板是可收縮的
collapsible : true,
// 頂部工具欄
tbar : [ {
text : "保存"
}, "-", {
text : "關閉"
} ],
// 底部工具欄
bbar : [ {
text : "上一頁"
}, {
text : "下一頁"
} ],
// 將底部按鈕居中
buttonAlign : "center",
// 在面板底部添加按鈕
buttons : [ {
text : "添加內容",
// 處理按鈕的單擊事件
handler : function() {
panel.add({
id : "panel2",
title : "面板三"
});
panel.doLayout();
}
}, {
text : "刪除內容",
handler : function() {
panel.remove("panel2");
}
}, {
text : "更新內容",
handler : function() {
// panel.load("news.jsp");
panel.body.update("<h1>當前時間</h1>" + new Date());
}
} ],
// 除了這些聲明以外的其餘都放置在panel的body部分
// 這裏放置html中的h1標籤
// html : "<h1>這是body部分</h1>",
// 加載網頁的內容顯示在面板body上
// autoLoad : "news.jsp"
// items選項內容會自動加到面板的body部分
items : [ btn, {
xtype : "button", // xtype是指定控件的類型，比如是按鈕；如果不指定xtype則默認是面板
text : "按鈕二"
}, {
title : "面板二",
width : 400,
height : 200,
// 設置邊框顯示爲無
border : false
} ]
});
});
panel.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJS-Pane組件</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="panel.js"></script>
</head>
<body>
</body>
</html>