标签：
<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组件的子类组件包括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‘}],
简单的说，
applyTo是将组件加在了指定元素之后，
而renderTo则是加在指定元素之内。
标签：
原文地址：http://www.cnblogs.com/sunliyuan/p/5839181.html
