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：程序效果图

   由上图可以看出，标题栏右侧放了一排小按钮，实现了一些体贴的功能，如关闭、刷新、最小化、最大化、设置等。如果设置了collapsible属性，可以看到一个向上的箭头，它的作用就是缩放面板Panel。顶部工具栏有“欢迎您登录聊天系统”字眼，底部工具栏有确定和重置按钮，这两个工具栏对应的属性分别为tbar(Top bar)和bbar(Bottom bar)