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>