一：Ext.Panel類簡介
二：Ext.Panel類常用屬性方法與事件
三：Ext.Panel實例運用
1.Ext.Panel類簡介
包： Ext
定義的文件： Panel.js
類全稱：
Ext.Panel 繼承自於：
Ext.Container
說明：面板是一種面向用戶界面構建應用程序最佳的單元塊，一種特定功能和結構化組件。
面板包含有底部和頂部的工具條，連同單獨的頭部、底部和body部分。它提供內建都得可展開和可閉合的行為，
連同多個內建的可制定的行為的工具按鈕。面板可簡易地置入任意的容器或布局，而面板和渲染管線（rendering pipeline）則由框架完全控制。
2.實例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var p = new Ext.Panel({
title: "My Panel",
collapsible: true,
x: 100,
y: 100,
width: 400,
height: 300,
floating: true, //設置面板浮動
frame: true, //設置完全透明和陰影效果
//draggable:true,
draggable: {
insertProxy: false, //去掉虛邊框
onDrag: function(e) {
var pel = this.proxy.getEl(); //得到當前的元素
this.x = pel.getLeft(true); //得到拖動時新的panel的x軸坐標
this.y = pel.getTop(true); //得到拖動時新的panel的y軸坐標
var s = this.panel.getEl().shadow; //得到拖動panel時的陰影對象
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
//設置陰影和新的panel一致
}
},
endDrag: function(e) {
this.panel.setPosition(this.x, this.y);
}
},
html: "<p>我是內容</p>",
renderTo: "container",
buttonAlign: "center",
tbar: [{ text: "工具欄1" }, { text: "工具欄2", handler: function() { alert("ok"); } }],
bbar: [{ text: "狀態欄1" }, { text: "狀態欄2", handler: function() { alert("狀態欄2"); } }],
buttons: [{ text: "注冊" }, { text: "退出", handler: function() { p.hide(); } }],
tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具欄按鈕","工具欄上的關閉按鈕時間被激發了")}}]
});
//alert(document.getElementById("container").outerHTML);
// p.render("container");
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
(帶頂部，底部，腳部工具欄的panel ):
var p=new Ext.Panel({
id:"panel1",
title:"標題",
collapsible:true,
renderTo:"container",
closable:true,
width:400,
height:300,
tbar:[{text:"按鈕1"},{text:"按鈕2"}], //頂部工具欄
bbar:[{text:"按鈕1"},{text:"按鈕2"}], //底部工具欄
html:"內容",
buttons: [{ text: "按鈕1" }, { text: "按鈕2"}] //footer部工具欄
});
（標准Panel工具欄） //添加下面的代碼到panel配置參數中 tools:
[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具欄按鈕","工具欄上的關閉按鈕時間被激發了")}}],
3.Ext.Panel類常用屬性方法與事件
panel組件的子類組件包括TabPanel,GridPanel,
FormPanel,TreePanel組件，所以非常有必要介紹Panel組件的配置參數和相關的屬性、方法。
//配置參數(只列舉部分常用參數)
1.autoLoad：有效的url字符串，把那個url中的body中的數據加載顯示，但是可能沒有樣式和js控制，只是html數據
2.autoScroll:設為true則內容溢出的時候產生滾動條，默認為false
3.autoShow:設為true顯示設為"x-hidden"的元素，很有必要，默認為false
4.bbar:底部條，顯示在主體內，//代碼：bbar:[{text:'底部工具欄bottomToolbar'}],
5.tbar:頂部條，顯示在主體內，//代碼:tbar:[{text:'頂部工具欄topToolbar'}],
}6.buttons:按鈕集合，自動添加到footer中（footer參數，顯示在主體外）//代碼：buttons:[{text:"按鈕位於footer"}]
7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認為right
8.collapsible：設為true，顯示右上角的收縮按鈕，默認為false
9.draggable:true則可拖動，但需要你提供操作過程，默認為false
10.html:主體的內容
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值
12.width：寬度
13.height：高度
13.title:標題
7.buttonAlign:footer中按鈕的位置，枚舉值為："left","right","center",默認為right
8.collapsible：設為true，顯示右上角的收縮按鈕，默認為false
9.draggable:true則可拖動，但需要你提供操作過程，默認為false
10.html:主體的內容
11.id：id值，通過id可以找到這個組件，建議一般加上這個id值
12.width：寬度
13.height：高度
13.title:標題
14.titleCollapse：設為true，則點擊標題欄的任何地方都能收縮，默認為false.
15.applyTo：（id）呈現在哪個html元素里面
17.renderTo：（id）呈現在哪個html元素里面
注：
15.applyTo：（id）呈現在哪個html元素里面
17.renderTo：（id）呈現在哪個html元素里面
注：
1、renderTo與render方法對應
2、applyTo與applyToMarkup方法對應
2、applyTo與applyToMarkup方法對應
簡單的說，
applyTo是將組件加在了指定元素之后，
而renderTo則是加在指定元素之內。