<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>window.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css">
<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(){
// 这是一个最基本的窗口
Ext.get('btn1').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300//窗口高度
}
).show();//需要显示的调用show()方法来显示窗口。
});
// 这是一个最基本的窗口,带动画
Ext.get('btn2').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300//窗口高度
}
).show('btn2');//show()方法的参数,表示动画从哪儿开始,即从哪儿飞出窗口。
});
Ext.get('btn3').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300,//窗口高度
html:"这里指定窗口中的内容,可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
}
).show('btn2');//show()方法的参数,表示动画从哪儿开始,即从哪儿飞出窗口。
});
// bodyStyle:指定窗口内容的样式。
Ext.get('btn4').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300,//窗口高度
bodyStyle:"padding:5px",
html:"这里指定窗口中的内容,可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
}
).show('btn4');//show()方法的参数,表示动画从哪儿开始,即从哪儿飞出窗口。
});
// autoLoad:将另一个页面的内容加载到当前窗口。
Ext.get('btn5').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300,//窗口高度
bodyStyle:"padding:5px",
autoLoad:{
url:"panel.html",
scripts:true
}
//html:"这里指定窗口中的内容,可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
}
).show('btn5');//show()方法的参数,表示动画从哪儿开始,即从哪儿飞出窗口。
});
// 通过items选择向窗口中添加组件。
Ext.get('btn7').on('click',function(){
new Ext.Window(
{
title:"这是一个窗口",//窗口标题
width:500,//窗口宽度
height:300,//窗口高度
bodyStyle:"padding:5px",
autoLoad:{
url:"../index.jsp",
scripts:true
},
items:[
new Ext.DatePicker({}),
new Ext.Button({text:"确定"})
],
minimizable:true,
maximizable:true
//html:"这里指定窗口中的内容,可以是<code><i><b>html</b></i></code><br><img src='d:/My Documents/My Pictures/121.jpg' width=500 height=260>"
}
).show('btn7');//show()方法的参数,表示动画从哪儿开始,即从哪儿飞出窗口。
});
Ext.get('btn8').on('click',function(){
var i = 0;
// 模仿任务栏窗口效果。
var btn = new Ext.Button(
{
text:"新建窗口",
pressed:true,//处于按下状态。
handler:function(){
i++;
// 单击“新建窗口”,新建一个窗口
var win = new Ext.Window(
{
title:"新建窗口"+i,
width:500,
height:300,
html:"新建窗口"+i,
minimizable:true,
maximizable:true,
listeners:{
// 事件处理
minimize:function(window){
// 最小化事件
window.hide(window.button.id);
window.minimizable = true;
},
close:function(window) {
//window.button:窗口,对按钮的引用。
var btn__ = window.button;//document.getElementById(window.button.id);
//用firebug查看ext生成的html代码,按钮实际上是一个table
// 下面的关系是:btn__parentNode(td).parentNode(tr).removeChild(bnt__parentNode(td));
alert(btn__.parentNode);
btn__.parentNode.parentNode.removeChild(btn__.parentNode);
}
}
}
);
win.show(btn.id);
//更新窗口内容。
win.getUpdater().update({url:"../index.jsp"});
//新建窗口时,新建一个对应的按钮。
win.button = new Ext.Button(
{
win:win,//按钮对窗口的引用。
id:"id"+i,
text:win.title,
pressed:true,
handler:function(btn){
// 如果窗口时最小化的,则显示窗口,否则隐藏窗口。
if(btn.win.minimizable) {
btn.win.show(btn.id);
btn.win.minimizable = false;
}
else {
btn.win.hide(btn.id);
btn.win.minimizable = true;
}
}
}
);
// 新建窗口时会同时新建一个按钮与之关联。
// 并添加到工具栏。
toolbar.addButton(win.button);
},
renderTo:document.body
}
);
// 定义工具栏
var toolbar = new Ext.Toolbar(
{
height:25,
renderTo:document.body,
items:[
btn
]
}
);
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="Window1">
<input type="button" id="btn2" value="Window2">
<input type="button" id="btn3" value="Window3">
<input type="button" id="btn4" value="Window4">
<input type="button" id="btn5" value="Window5">
<input type="button" id="btn6" value="Window6">
<input type="button" id="btn7" value="Window7">
<input type="button" id="btn8" value="Window8">
</body>
</html>
ext--window
最新推荐文章于 2024-08-26 21:48:51 发布