5.1.1Ext.panel.PanelExt.panel.Panel扩展自Ext.container.Container包括如下五部分：底部工具栏（bottomtoolbars），顶部工具栏（toptoolbars），面板头部（header）面板底部（footer），面板体（body）。Ext.panel.Panel示例<scripttype="text/javascript">Ext.onReady(function(){Ext.creat('Ext.panel.Panel',{title:'面板头部（header）',tbar:['顶端工具栏（bottomtoolbars）'],height:200,width:300,frame:true,renderTo:Ext.getBody(),bodyPadding:5,bodyStyle:'background-color:#FFFFFF',html:'面板体（body）',tools:[{id:'toggle'},{id:'close'},{id:'maximize'}],buttons:[{text；'面板底部（footer）'}]});});</script>animCollapseautoDestroyautoElautoLoadautoRenderautoScroll**重点**bbarbbar:[{xtype:'button',text:'Button1'}]等同于dockedItems:[{xtype:'toolbar',dock:'bottom',items:[{xtype:'button',text:'Button1'}]}]bodyBorderbodyPaddingborderbuttons**重点**closableboolean,true则显示一个关闭按钮允许用户关闭面板，false则隐藏关闭按钮，不允许用户关闭面板，默认为false。closeAction设置点击面板关闭按钮的动作，有效值包括close和hide，默认为closecollapseDirection设置面板的折叠方式，默认为有效值包括：topbottomleftright，当折叠面板是borderlayout布局的直接子元素时该配置项将被忽略。collapseFirstcollapseMode设置面板的折叠方式，有效值包括omitted，headercollapsed设置面板在第一次渲染时是否处于收缩状态，true则收缩，false则展开，默认为falsecollapsible设置是否允许面板进行展开和收缩，true则允许进行展开和收缩，并在面板头部显示伸缩按钮。默认为false。contentEldefaultType面变中元素的默认类型，默认为‘panel’defaultsdockedTtems设置停靠在面板中的组件或组件序列，有效值包括：top，right，left，bottomfbarfloatableframe设置是否渲染面板，true则渲染面板为圆角边框，默认为falseheaderPosition设置面板标题栏的为止，有效值包括：top，bottom，left，right，默认topheight面板高度hideCollapseToolhtmlitems一个单独的子组件或子组件的数组**重点**layout面板布局类。可以简单地配置一个字符窜或者一个布局的配置对象。minButtonWidth设置footertoolbar按钮的最小宽度placeHoderpreventHeader是否阻止面板标题栏的显示，默认为falserbartbar设置面板顶端工具栏的便利方法。tbar:[{xtype:'button',text:'Button1'}]title显示在面板头部的标题信息titleCollapse设置是否允许通过点击面板标题进行展开和收缩操作，true则允许，默认为falsetools标题栏工具按钮配置对象的数组，这些按钮会被添加到面板头部功能区width面板宽度。表5-2idString按钮id，如果没有配置type则按钮以id指定的类型为准typeString按钮类型，见5-3handlerFunction点击按钮后触发的处理函数scopeObject处理函数的执行范围qtipString/Object为按钮指定提示信息，可以使字符串或配置对象表5-3Ext.panel.Tool配置type与按钮图标对应关系表toggleminimizerestorepinri