//这段代码在VS中执行结果与firebug下有差别，不同之处就是底端工具栏的显示.还有就是标题栏的工具按钮显示有问题
//Ext.get(document.body).update('<div />');
var firstPanel = Ext.create('Ext.panel.Panel', {
collapsible:true,
renderTo: Ext.getBody(),
layout: 'accordion',//采用折叠布局，适合大量分组内容，多个子面板放在面板中，一次只有个子面板处于打开状态。，
//然后可以点击按钮展开各个子面板和收缩子面板。
defaults: { bodyPadding:11},
frame: true,
title: '面板头部',//第一部分：又叫面板标题栏
height: 300,
bodyPadding: 5,//不定义bodyPadding可能会导致面板体上的文本被面板部分遮挡，所以需要定义面板体的填充，只需要上下偏离5个像素，就可确保文本不会被面板标题栏和面板左边元素遮挡。
html: '<b>面板体<b>',//第二部分：设置面板体的内容为html片段，当然除了添加html标签也可以添加文本。
450,//默认panel的宽度是浏览器的宽度，即宽度充满整个页面。
bodyStyle: 'background-color:#ffffff',//设置面板体背景为白色
tbar: [//第三部分，面板的上部工具栏，添加工具栏配置对象（即按钮）。
{ text: '新建' },//面板中定义的组件，默认是panel，但是若在配置对象中使用了text属性，则添加组件为button
{ text: '打开' },//若是使用了title则为panel
{ text: '保存' }
],
bbar: [//第四部分：面板的底端工具栏.要显示定义按钮{text：‘提交’},若是以{'提交'}则提交二字会部分被面板下部遮挡
{text: '提交' },
{text:'取消提交'}
],
tools: [//面板标题栏工具按钮，可以定义面板的最小化，最大化，关闭。都是按钮的形式。用面板提供的id
//{ id: 'toggle' },//定义对应的按钮很方便，程序员只需要实现对应的handler就ok了。
{ id: 'minimize' },
//{ id: 'print' },
{ id: 'close' },
{ id: 'maximize' }
],
buttons: [//第五部分：面板的底部位于面板体的右下方，但是并不是面板的最下，底端工具栏处于面板的最下方。
{ text: '面板底部' }
],
items:[
{title:'面板一',html:'面板一面板体'},
{title:'面板二',html:'面板二面板体'}
]
});