jQueryを使ってWindowを開いたり閉じたりする。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="../../js/ext-base.js"></script>
<script type="text/javascript" src="../../js/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../../css/ext-all.css"/>
<script type="text/javascript">
$(function(){
var win = new Ext.Window({
title: 'タイトル',
html: 'メッセージ<br/>メッセージメッセージメッセージメッセージ',
autoWidth: true,
height: 300,
closeAction: "hide",
layout:'fit'
});
$('#btnOpenWindow').toggle(
function() {
win.isVisible() ? win.hide(this) : win.show(this);
},
function() {
win.isVisible() ? win.hide(this) : win.show(this);
}
);
});
</script>
<title></title>
</head>
<body>
<input type="button" id="btnOpenWindow" value="テスト"/>
</body>
</html>
closeActionは、デフォルトだとcloseに指定されていて、window objectがdestroyされる。
一度生成された物を使いまわしたければ、表示を切り替えるだけにしておけば良い。
win.isVisible() ? win.hide(this) : win.show(this);
の部分はアニメーションさせなくても良いなら
win.setVisible(!win.isVisible());
で事足りる。
PR
