Ext.Panel

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<style type="text/css">
    .x-panel-body p {
        margin:10px;
        font-size:12px;
    }
 #zzz { display:none}
 #container { margin:50px}
    </style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
 new Ext.Panel({
 tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],
  title:"zzz",
  x:100,
  y:100,
  floating:true,
  collapsible:true,
  >  height:400,
  frame: true,
  
  html:Ext.get('zzz').dom.innerHTML,
        tbar:[{text:"按钮1"},{text:"按钮2"}], //顶部工具栏
        bbar:[{text:"按钮1"},{text:"按钮2"}],  //底部工具栏
        buttons:[{text:"按钮1"},{text:"按钮2"}], //footer部工具栏
  renderTo:"container",
  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;
    if(s){
     s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
    }
   },
   
   endDrag: function(e){
    this.panel.setPosition(this.x,this.y)
   }
  } 
 })
})
 
 
</script>
<input value="test" id="inputs" type="button" />
<div id="container">
</div>

<div id="zzz"><p>hi</p></div>
</body>
</html>

你可能感兴趣的:(html,function,工具,button,tools,stylesheet)