2.Panel
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元素里面
示例一：简答panel
Ext.onReady( function() { new Ext.Panel( { renderTo:hello, width:400, height:300, title:"我是Panel", 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 } ); } );
示例十：加载远程页面。
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, autoLoad :'page1.html'//自动加载面板体的默认连接 就是将page1.html页面的内容显示在该panel中 }) } );
示例十一：加载本地资源
Ext.onReady( function() { new Ext.Panel({ renderTo:hello, width:400, height:300, title:"我是Panel", autoScroll:true, collapsible:true, contentEl:"localElement" //将页面标签id的内容显示在panel中 }) } );
