1：基本知識
Panel is a container that has specific functionality and structural components that make it the perfect building block for application-oriented user interfaces.
Panels are, by virtue of their inheritance from Ext.Container, capable of being configured with a layout, and containing child Components.
When either specifying child items of a Panel, or dynamically adding Components to a Panel, remember to consider how you wish the Panel to arrange those child elements, and whether those child elements need to be sized using one of Ext's built-in
layout
schemes. By default, Panels use the ContainerLayout scheme. This simply renders child components, appending them one after the other inside the Container, and does not apply any sizing at all.
A Panel may also contain bottom and top toolbars, along with separate header, footer and body sections (see frame for additional information).
Panel also provides built-in expandable and collapsible behavior, along with a variety of prebuilt tool buttons that can be wired up to provide other customized behavior. Panels can be easily dropped into any Container or layout, and the layout and rendering pipeline is completely managed by the framework.
面闆由以下幾個部分組成：一個頂級工具欄、一個底部工具欄、面闆頭部、面闆尾部、面闆主區域。面闆類中還内置了面闆展開、關閉等功能，并提供了一系列可重用的的工具按鈕，使得我們可以輕松實作自定義的行為，面闆可以放入其他任何容器中，面闆自身也是一個容器，它又可以包含各種其他元件
2：代碼例子panel.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Panel面闆</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
var panel = new Ext.Panel({
title: '使用者登入', //定義标題
width: '380', //寬度
height: '200', //高度
collapsible: true,
layout: 'form',
items: [{
fieldLabel: '使用者名',
xtype: 'textfield',
width: 150,
name: 'username',
allowBlank: false,
blankText: '使用者名不能為空',
id: 'username'
},{
fieldLabel: '密碼',
xtype: 'textfield',
inputType: 'password',
width: 150,
name: 'password',
allowBlank: false,
blankText: '密碼不能為空',
id: 'password'
}],
tbar: [{ //頂部工具條的設定
text: '歡迎您登入聊天系統'
}],
bbar: [{ //底部工具條的設定
pressed: true,
text: '确定'
}, " ",
{
pressed: true,
text: '重置'
}],
tools: [{ //對一些工具的配置
id:'refresh',
handler: function(event, toolEl, p) {
p.getUpdate().update({url:'panel.jsp', script: true});
}
}, {
id: 'close',
handler: function(event, toolEl, p) {
p.hide();
}
}],
renderTo: b1
});
});
</script>
</head>
<body>
<div id="b1" style="position: absolute; left: 420px; top: 390px"></div>
</body>
</html> 3：程式效果圖
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)