Ext.Panel

1、主要配置项：
applyTo：在目标元素之后追加组件。
renderTo：将目标元素作为新组件的容器。
frame：是否渲染面板，默认为false。

layout：面板的布局类型。
layoutConfig：被选布局的配置项。

title：设置面板头部的标题信息。
header：设置是否创建面板头部，默认为false。
headerAsText：是否在面板头部显示标题信息，默认为true。
tools：工具按钮配置对象的数组。
tools主要配置项：
id：可选值有toggle、close、minimize、maximize、refresh、plus、minus、help、search、save等。
qtip：按钮的提示信息。
handler：单击按钮后触发的函数。
draggable：是否可以拖曳，默认为false。



collapsible：是否允许面板进行展开和收缩，默认为false。
titleCollapse：是否允许通过单击面板头部进行展开和收缩操作，默认为false。
hideCollapseTool：是否隐藏展开和收缩按钮，默认为false。
collapsed：设置面板在第一次渲染时是否处于收缩状态，默认为false。
animCollapse：是否在展开和收缩时显示动画效果，默认为true。

autoWidth：是否使用自动宽度，默认为false。
width：面板宽度，默认为auto。
autoHeight：是否使用自动高度，默认为false。
height：面板高度，默认为auto。
autoScroll：是否自动显示滚动条，默认为false。
disabled：面板是否失效，默认为false。

floating：面板是否浮动。
shadow：面板是否有阴影，此配置项只有在floating=true时有效。
x：浮动时的X坐标。
y：浮动时的Y坐标。

draggable：面板是否可拖曳，默认为false。或者自定义DD对象。

tbar：设置面板的顶端工具栏。

autoLoad：设置面板自动加载的url地址，作为body元素内容。items、html和contentEl的内容将被替代。

autoLoad:'ajax1.htm'

autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
items：单独一个子组件或组件的数组。
html：设置面板元素的内容，可以是HTML片段或DomHelper生成的内容。
contentEl：设置面板的内容元素，可以是页面元素的id或已存在的HTML节点。
bodyStyle：面板体的自定义样式。
defaults：应用到面板容器中所有元素的配置对象。
defaultType：面板中元素的默认类型，默认为panel。

bbar：设置面板的底端工具栏。

buttons：加入到面板底部中按钮配置对象的数组。
buttonAlign：按钮的对齐方式。有效值包括left、center、right。默认为right。

2、Ext.ButtonGroup扩展自Ext.Panel，其xtype值为buttongroup。
主要配置项：
columns：栏数

var panel1 = new Ext.Panel({
renderTo: "div1",
width: 500,
height: 200,
title: "标题信息",
collapsible: true,
titleCollapse: true,
hideCollapseTool: true,
tbar: [
{xtype:"button", id: "btnAdd", text:"添加", iconCls:"add"},
{xtype:"button", text:"删除", iconCls:"delete"},
{xtype:"button", text:"保存", iconCls:"save"},
"-",
{xtype:"button", text:"查找", iconCls:"search"},
{xtype:"button", text:"返回", iconCls:"back"}
],
html: "面板范例",
bodyStyle: "padding:3px;",
bbar: [
new Ext.Toolbar.Spacer(),
"<font color=red>温馨提示：</font>"
]
});

function clickPanelButton(event, toolEl, panel){
alert(panel1.getTool("close"));
}