ExtJs2.0学习系列(2)--Ext.Panel

来源：互联网发布：广电和网络电视编辑：程序博客网时间：2024/04/29 00:46

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ExtJs2.0学习系列(2)--Ext.Panel</title>
<link type="text/css" href="Ext/resources/css/ext-all.css" rel="stylesheet" />
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var panel=new Ext.Panel({
   title:"ExtPanel Demo",
   x:100,
   y:100,
   renderTo:Ext.getBody(),
   floating:true,//True表示为浮动此面板（带有自动填充和投影的绝对定位），如果缺少这个配置，那么所生成的panel将不能浮动（不能被拖动）
   collapsible:true, //右上角上的收缩按钮，设为false则不显示,默认为flase
   width:400,
   height:200,
   frame: true, //实现圆角
    draggable: {
                   insertProxy: false,//拖动时不虚线显示原始位置
                  onDrag : function(e){
                    var pel = this.proxy.getEl();//获取对Element的引用
                       this.x = pel.getLeft(true);
                       this.y = pel.getTop(true);//获取拖动时panel的坐标
            var s = this.panel.getEl().shadow;
            if (s) {
                s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
            }
            },
            endDrag : function(e){
                      this.panel.setPosition(this.x, this.y);//移动到最终位置
                }
        },
   tbar:[{text:"tbutton1"},{text:"tbutton2"}],//顶部按钮
   bbar:[{text:"bbutton1"},{text:"bbutton2"}],//底部按钮
   buttons:[{text:"button1"},{text:"button2"}],//这里只是实现了在panel内添加button的功能，
                                                 //我们还可以为这几个button添加句柄，弹框什么的，就像是在上面的Ext.Window的示例中一样
   tools:[{id:"save"},{id:"help"},{id:"up"},{id:"down"},{id:"close",handler:function(){Ext.Msg.alert("点击了关闭按钮");}}],
   html:"Panel ContentPanel ContentPanel ContentPanel ContentPanel ContentPanel ContentPanel ContentPanel Content"

});

});

</script>
</head>

上面的代码为我们创建了一个panel控件，下面是对应的图片效果。