第三講：面板組件Panel
1.最簡單的Panel示例。
2.帶滾動條的Panel
3.可收縮的Panel
4.包含頂部和底部工具欄的Panel
5.爲按鈕添加事件處理
6.可拖動的Panel
7.拖動後，不顯示以前位置的虛線框
8.拖動後，停留在拖動位置
9.拖動時，不顯示以前的陰影
10. Panel頂部工具欄
示例一：
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容" } ); } ); |
1.autoLoad：有效的url字符串，把那個url中的body中的數據加載顯示，但是可能沒有樣式和js控制，只是html數據
2.autoScroll:設爲true則內容溢出的時候產生滾動條，默認爲false
3.autoShow:設爲true顯示設爲"x-hidden"的元素，很有必要，默認爲false
4.bbar:底部條，顯示在主體內
5.tbar:頂部條，顯示在主體內
6.buttons:按鈕集合，自動添加到footer中（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:標題
14.titleCollapse：設爲true，則點擊標題欄的任何地方都能收縮，默認爲false.
15.applyTo：（id）呈現在哪個html元素裏面
16.contentEl：（id）呈現哪個html元素裏面，把el內的內容呈現
17.renderTo：（id）呈現在哪個html元素裏面
示例二：顯示滾動條
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true } ); } ); |
實例三：可收縮的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true } ); } ); |
示例四：包含頂部和底部工具欄的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1"},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}] } ); } ); |
示例五：爲按鈕添加事件處理。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}] } ); } ); |
示例六：可拖動的Panel
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:true } ); } ); |
示例七：拖動後，不顯示以前位置的虛線框
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false } } ); } ); |
示例八：拖動後，停留在拖動位置。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); }, endDrag:function(e) { this.panel.setPosition(this.x,this.y); } }, x:100, y:100, floating:true } ); } ); |
示例九：拖動時，不顯示以前的陰影。
|
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow; s.hide(); }, endDrag:function(e) { this.panel.setPosition(this.x,this.y); } }, x:100, y:100, floating:true } ); } ); |
示例十：Panel頭部工具欄
|
Ext.onReady( function() { new Ext.Panel( { tools:[{id:"save",handler:function(){Ext.MessageBox.confirm("保存文件","是否保存文件");}},{id:"help"}], renderTo:hello, width:400, height:300, title:"我是Panel", html:"主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容" + "主體內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體" + "內容主體內容主體內容主體內容主體內容主體內容主體內容主體內容主" + "體內容主體內容主體內容主體內容主體內容主體內容", autoScroll:true, collapsible:true, tbar:[{text:"頂部按鈕1",handler:function(){Ext.MessageBox.alert("點擊","頂部按鈕1被點擊")}},{text:"頂部按鈕2"}], bbar:[{text:"底部按鈕1"},{text:"底部按鈕2"}], draggable:{ insertProxy:false, onDrag:function(e){ var pel = this.proxy.getEl(); this.x = pel.getLeft(true); this.y = pel.getTop(true); var s = this.panel.getEl().shadow; s.hide(); }, endDrag:function(e) { this.panel.setPosition(this.x,this.y); } }, x:100, y:100, floating:true } ); } ); |
id的枚舉值爲：
toggle(collapsable爲true時的默認值)
close
minimize
maximize
restore
gear
pin
unpin
right
left
up
down
refresh
minus
plus
help
search
save
print
示例十一：加載遠程頁面。
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, autoLoad :'page1.html'//自動加載面板體的默認連接 }) } ); |
|
<HTML> <HEAD> <TITLE>員工信息</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </HEAD> <BODY> <center> <table border=1> <tr> <th width = 60>序號</th><th width = 80>姓名</th> <tr> <tr> <td>1</td><td>張三</td> </tr> <tr> <td>2</td><td>李四</td> </tr> <tr> <td>3</td><td>王五</td> </tr> <tr> <td>4</td><td>趙六</td> </tr> <tr> <td>5</td><td>陳七</td> </tr> <tr> <td>6</td><td>楊八</td> </tr> <tr> <td>7</td><td>劉九</td> </tr> </table> </center> </BODY> </HTML> |
示例十二：加載本地資源
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>TestPanel</title> <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../Ext/ext-all-debug.js"></script> <script type="text/javascript" src="TestPanel2.js"></script> <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link> </head> <body> <div id="hello"></div> <table border=1 id="localElement"> <tr> <th width = 60>序號</th><th width = 80>姓名</th> <tr> <tr> <td>1</td><td>張三</td> </tr> <tr> <td>2</td><td>李四</td> </tr> <tr> <td>3</td><td>王五</td> </tr> <tr> <td>4</td><td>趙六</td> </tr> <tr> <td>5</td><td>陳七</td> </tr> <tr> <td>6</td><td>楊八</td> </tr> <tr> <td>7</td><td>劉九</td> </tr> </table> </body> </html>
|
|
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, contentEl:"localElement" }) } ); |