ext panel

来源:互联网 发布:windows live mail 编辑:程序博客网 时间:2024/06/05 16:09

Ext.onReady(fn);

function fn(){
 new Ext.Panel({
  title:"120急救中心管理系统",
  collapsible:true,
  renderTo:Ext.getBody(),
  x:200,
  y:100,
  width:500,
  height:400,
  frame:true,
  floating:true,
  //添加下面的代码到panel配置参数中
        tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],
  draggable:{
   insertProxy:false,
   onDrag : function(e){
             var pel = this.proxy.getEl();
             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);//移动到最终位置
         }
  },
  bodyCfg: {
         tag: 'center',
         cls: 'x-panel-body',  // Default class not applied if Custom element
         html: 'Message'
        },
     footerCfg: {
         tag: 'h2',
         cls: 'x-panel-footer',        // same as the Default class
         html: 'footer html'
     },
     footerCssClass:'custom-footer', // additional css class, see {@link
     footerStyle:'background-color:red', // see {@link #bodyStyle}
     tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
        bbar:[{text:"按钮1"},{text:"按钮2"}]  //底部工具栏

 });
}