面板是ExtJs控件的基础，很多高级的控件都是在面板上扩展的，还有其他大多数控件也都有直接或间接的关系。
面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件，面板类中还内置了面板展开、关闭等功能，并提供了一系列可重用的工具按钮，使得我们可以轻松实现自己定义的行为，面板可以放入其他任何容器中，面板本身就是一个容器，他里面又可以包含各种其他组件。
面板类名为：Ext.Panel，其中xtype为panel,例子如下：
Ext.onReady(function(){
var obj={title:"hello",
width:300,
height:200,
html:'<h1>hello jiwenfeng</h1>',
tbar:[{text:'顶部工具栏toolbar'}],
bbar:[{text:'底部工具栏buttombar'}],
buttons:[{text:'按钮位于footer'}]
};
var panel= new Ext.Panel(obj);
panel.render("hello");
});
另外还有一种创建面板的方式，如下：
Ext.onReady(function(){
new Ext.Panel({
title:"hello",
width:200,
height:200,
html:'<h1>位于中间区域内容</h1>',
tbar:[{text:'顶部工具栏toolbar'}],
bbar:[{text:'底部工具栏bootombar'}],
bottons:[{text:'位于footer按钮'}]
});
运行结果图如下：
一般情况下，顶部工具栏和底部工具栏只需要一个，而面板中一般很少直接包含按钮，一般会把按钮放在工具栏上面，如下：
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:"hello",
width:200,
height:200,
html:'<h1>hello ExtJs</h1>',
tbar:[{pressed:true,text:'刷新'}]
});
});
运行结果图如下：
