<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>