ExtJS基础第三讲学习

第三讲：面板组件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" }) } );