目标：
了解ExtJS中panel的组件
在vs项目中应用panel组件
扩展Extjs中panel功能
介绍继承与panel的子组件及其应用
内容：
面板包括5个部分：header,tbar,body,bbar,buttons
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,
width: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:标题
width:宽度
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:按钮对其
效果图显示：
toos:[{id:'save'},{id:'help'},{id:right},{id:left}] //自定义面板右上角按钮
items:[{new Ext.button({text:'按钮'})}] //为面板添加组件
contentEl:id2,
autoLoad:Data5.html, //不好加载aspx页面数据
面板体加载资源的方法：加载内部资源用contentEl:id, 加载外部资源用autoLoad:url
设计可以拖动的面板：只要改写draggable 和 endDrag 属性就可以了
draggable:{
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s = this.panel.getEl().shadow;
if (s){
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
}
本课源码：
代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext5.aspx.cs" Inherits="EXT1.Ext5" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>第五课,ExtJS中面板应用</title>
8 <script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
9 <link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
10 <script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
11 <script type="text/javascript">
12 function Read1() {
13 var json={
14 Name:"陈建强",
15 Sex:"男",
16 Age:26,
17 Married:false,
18 Marks:[
19 { name:"语文",Mark:90},
20 { name:"数学",Mark:98}
21 ],
22 Address:{
23 City:"武汉",
24 Street:"光谷大道"
25 }
26 }
27 var MyPanel=new Ext.Panel({
28 title:"面板应用",
29 collapsible:true,
30 titleCollapse:true,
31 renderTo:Ext.getBody(),
32 x:500,
33 y:50,
34 width:300,
35 height:200,
36 frame:true,
37 floating:true,//当设置floating为true时x,y项才有效
38 draggable:{
39 insertProxy: false,//拖动时不虚线显示原始位置
40 onDrag : function(e){
41 var pel = this.proxy.getEl();
42 this.x = pel.getLeft(true);
43 this.y = pel.getTop(true);//获取拖动时panel的坐标
44 var s = this.panel.getEl().shadow;
45 if (s){
46 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
47 }
48 },
49 endDrag : function(e){
50 this.panel.setPosition(this.x, this.y);//移动到最终位置
51 }
52 },
53 html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
54
55 });
56 }
57 function Read2() {
58 var json={
59 Name:"陈建强",
60 Sex:"男",
61 Age:26,
62 Married:false,
63 Marks:[
64 { name:"语文",Mark:90},
65 { name:"数学",Mark:98}
66 ],
67 Address:{
68 City:"武汉",
69 Street:"光谷大道"
70 }
71 }
72 var MyJson={
73 title:"面板应用",
74 width:400,
75 height:300,
76 x:500,
77 y:50,
78 floating:true,
79 applyTo:id1,
80 //frame:true,
81 draggable:true,
82 titleCollapse:true,//只有当设置了collapsible:true是此属性才有意义
83 collapsible:true,
84 bbar:[{text:'状态栏'},{text:'状态栏2'}],
85 tbar:[{text:'工具栏'}],
86 tools:[{id:'toggle'},{id:'close'},{id:'maximize'},{id:'save'},{id:'refresh'}],
87 bodystyle:'background-color:#FFBFEE',
88 buttons:[new Ext.Button({text:'底部'})],
89 bodyBorder:true,
90 //contentEl:id2,
91 autoLoad:'MyPages/Data5.html',//<a href="MyPages/Data5.aspx">MyPages/Data5.aspx</a>
92
93 html:"<font color='red'>用户名:"+json.Name+"</font>"+'<br>'+"年龄:"+json.Age+"<br>数学成绩:"+json.Marks[1].Mark+"<br>所在地址:"+json.Address.City+json.Address.Street
94 };
95 var MyPanel=new Ext.Panel(MyJson).show();
96 }
97 function Read3() {
98 var Mypanel=new Ext.Panel({
99 title:'Extjs面板应用',
100 html:'面板内容',
101 floating:true,
102 x:450,
103 y:50,
104 //modal:true,
105 width:450,
106 height:350,
107 renderTo:Ext.getBody(),
108 frame:true,
109 collapsible:true,
110 titleCollapse:true,
111 draggable:{
112 insertProxy: false,//拖动时不虚线显示原始位置
113 onDrag : function(e){
114 var pel = this.proxy.getEl();
115 this.x = pel.getLeft(true);
116 this.y = pel.getTop(true);//获取拖动时panel的坐标
117 var s = this.panel.getEl().shadow;
118 if (s){
119 s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
120 }
121 },
122 endDrag : function(e){
123 this.panel.setPosition(this.x, this.y);//移动到最终位置
124 }
125 },
126 autoLoad:'MyPages/Data5.html',//加载了外部资源后html属性内容无效了
127 contentEl:id2,//加载的内部资源时html属性内容有效
128 tbar:[{text:"打开",handler:Read1},{text:"保存"},{text:"关闭"}],
129 bbar:[{text:"状态1"},{text:"状态2"},{text:"状态3"}],
130 buttons:[{text:"按钮1", handler:Read1},{text:"按钮2"}],
131 //buttonsAlign:'right',
132 tools:[{id:'save'},{id:'help',handler:function () {alert("你需要我的帮助");}}]
133 });
134 }
135 Ext.onReady(Read3);
136 </script>
137 </head>
138 <body>
139 <form id="form1" runat="server">
140 <div id="id1">
141
142 </div>
143 <div id="id2" visible=true>
144
145 </div>
146 </form>
147 </body>
148 </html>
149
