目标：
了解ExtJS中panel的组件
在vs项目中应用panel组件
扩展Extjs中panel功能
介绍继承与panel的子组件及其应用
内容：
panel作为面板组件在项目中出现，可以作为其他组件的容器
panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel组件，
所以非常有必要介绍Panel组件的配置参数和相关的属性、方法。
panel组件的属性
1 1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2 2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3 3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false
4 4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5 5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6 6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7 7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right
8 8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9 9.draggable:true则可拖动，但需要你提供操作过程，默认为false
10 10.html:主体的内容
11 11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12 12.width：宽度
13 13.height：高度
14 13.title:标题
15 14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.
16 15.applyTo：（id）呈现在哪个html元素里面
17 16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
18 17.renderTo：（id）呈现在哪个html元素里面
19
实例讲解：
<script type="text/javascript">
function Read1() {
var json={
Name:"陈建强",
Sex:"男",
Age:26,
Married:false,
Marks:[
{ name:"语文",Mark:90},
{ name:"数学",Mark:98}
],
Address:{
City:"武汉",
Street:"光谷大道"
}
}
var MyPanel=new Ext.Panel({
title:"面板应用",
collapsible:true,
titleCollapse:true,
renderTo:Ext.getBody(),
x:500,
y:50,
300,
height:200,
frame:true,
floating:true,//当设置floating为true时x,y项才有效
draggable:true,
html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
});
}
Ext.onReady(Read1);
</script>
在上面的javascript代码中我们可以看到定义了一个Read1方法里面又定义了一个json变量和一个panel变量
其中json的介绍我们在第二课中已经介绍了不在赘述
对于panel是我们定义的一个面板对象 var Mypanel=new Ext.panel(Config配置属性项)
注意：当floating:true时x,y项才有用，当frame:true时园角边框出现同时内容背景面板改变颜色
title:标题
宽度
height:高度
x:面板在网页x坐标
y:面板在网页Y左边
html:面板内容
frame:ture 园角边框
draggable:true 是否可以拖动面板 但是不可以定位
titleCollapse:true 点击标题栏收缩面板
collapsible:true 显示收缩按钮
renderto:id1 在id1上显示面板
ApplyTo:id1 在id1后面显示面板
autoLoad:url 自动加载url页面内容到面板
autoScroll:ture 自动出现滚动条
autoShow:ture 显示x-hidden
tbar:顶部栏
bbar:顶部栏
buttons:按钮集
buttonAlign:按钮对其
效果图显示：
