1、Panel 是一个特殊的容器，因为他既有容器的特性，又具有自己独有的特性。
Panel是一个容器,具有特定的功能和结构组件，使它使能够完美地为面向应用的用户界面创建部件。 Panel继承自Ext.container.Container,可以设置自身的layout布局,并且可以包含子组件。要么指定Panel的items，要么动态向Panel中添加Components ，要记得考虑 你希望Panel如何排列这些子元素，并且这些子元素是否需要使用Ext内建的layoutlayout规则调整尺寸。 默认情况下，Panel使用ContainerLayout自动规则。它简单地渲染子组件，将它们一个接一个地添加到Container中， 并且不再进行任何调整尺寸的操作,否则还可以配置layout来设置panel容器内子组件的大小与位置。
2、面板组件被分为七个部分，分别是：
标题、工具栏（上下左右）、按钮工具栏、内容区域
1）标题（title）：标题栏里不仅仅是一个文本标题，还可以添加工具，因为他还有Header功能，可以在工具去添加工具，比如最小化、最大化等。配置项使用 title:‘title‘ 和 tools:[{xtype:‘help‘},{xtype:‘search‘}]
2）工具栏：tbar bbar lbar rbar ; 分别对应上下左右的工具栏，使用与tools一致
3）按钮工具栏：buttons或fbar，二者都是在内容区域与bbar之间显示工具，还可以通过buttonAlign来控制按钮的摆放
4）内容区域：如果单纯使用模板方法模式，可以使用html配置项，如果作为容器，最好使用items添加子组件
3、面板的一些重要属性
1）closeAction：可以字符串的destroy（默认）或hide；前者是当点击close关闭按钮或调用close方法时会完全销毁对象，把DOM从文本树中移除，后者只是隐藏，还可以使用show展示出来。
2）bodyCls：面板主体样式，这个是一个class类名哦
3）bodyStyle：面板主体样式，这个是一个style配置项
4）bodyPadding：面板主体内边距，其实就是子组件之间的距离
5）layout：默认自动布局，可以设置字符串或layout对象来设置布局
6）width、height：容器的大小
7）icon：指定一个图片路径，设置标题栏的图标
8）IconCls：一个class名称，设置标题栏的图标
4 、tools 工具栏的配置项
1）type：按钮名称，诸如 save help search ..........
2）handler：工具点击时触发的事件
3）scope：作用域
4）stopEvent：如果为false表示允许事件进行传播
5）tooltip：字符串或QuickTips对象，其实就是鼠标放在图标上时显示的提示信息
5 、实例
var resultsPanel = Ext.create(‘Ext.panel.Panel‘, {
title: ‘Results‘,
width: 600,
height: 400,
renderTo: Ext.getBody(),
layout: {
type: ‘vbox‘, // 子元素垂直布局
align: ‘stretch‘, // 每个子元素宽度充满子容器
padding: 5
},
items: [{ // 指定一个grid子元素
xtype: ‘grid‘,
columns: [{header: ‘Column One‘}], // 只配置一列显示，没有数据
store: Ext.create(‘Ext.data.ArrayStore‘, {}), // 设置一个没有数据的store
flex: 1 // 占用容器的1/3高度 (在以 Box 为布局中)
}, {
xtype: ‘splitter‘ //一个分割器在两个子组件之间
}, { // Details 面板作为一个配置进来的Panel (没有用xtype指定，默认是 ‘panel‘).
title: ‘Details‘,
bodyPadding: 5,
items: [{
fieldLabel: ‘Data item‘,
xtype: ‘textfield‘
}], // 表单元素(文本域)
flex: 2 // 占用容器的2/3高度 (在以 Box 为布局中)
}]
});
参考：
1）ExtJS 权威指南
2）ExtJS4.0 帮助文档