ExtJS入門 タブパネルを閉じるときのイベント
タブパネルを閉じるときのイベントは少しややこしいので、簡単にまとめておきます。
以下のようなコードを使って、イベントの発火の順番をfirebugのコンソールに出力します。
要firefox + firebugです。
・html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 タブパネルのイベント</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="tabpanel_event.js"></script>
</head>
<body>
<div class="body">
</div>
</body>
</html>
・javascript
Ext.TabPanelクラス自体が、Ext.Panelクラスのサブクラスであるため、同じイベントが設定できるため少しややこしくなっています。どのイベントがどこで働くかを見るために、あえて意味のないイベントもセットしています。
Ext.onReady(function(){
var tabpanel = new Ext.TabPanel({
title:'タブパネル',
renderTo:Ext.getBody(),
activeTab:0,
defaults:{
listeners:{//アイテムパネルのイベント
'beforeremove':function(){
Ext.Msg.alert('アイテムパネルイベント','beforeremoveイベント');
console.debug('アイテムパネルbeforeremove');
//return false;
},
'remove':function(){
Ext.Msg.alert('アイテムパネルイベント','removeイベント');
console.debug('アイテムパネルremove');
},
'beforeclose':function(){
Ext.Msg.alert('アイテムパネルイベント','beforecloseイベント');
console.debug('アイテムパネルbeforeclose');
//return false;
},
'close':function(){
Ext.Msg.alert('アイテムパネルイベント','closeイベント');
console.debug('アイテムパネルclose');
},
'beforedestroy':function(){
Ext.Msg.alert('アイテムパネルイベント','beforedestroyイベント');
console.debug('アイテムパネルbeforedestroy');
},
'destroy':function(){
Ext.Msg.alert('アイテムパネルイベント','destroyイベント');
console.debug('アイテムパネルdestroy');
}
},
closable:true,
bodyStyle:'padding:10px;'
},
items:[
{
html:'<h1>A Panel<h1>',
title:'panel'
},{
html:'<h1>A Panel<h1>',
title:'panel'
},{
html:'<h1>A Panel<h1>',
title:'panel'
}
],
listeners:{//タブパネル自体のイベント
'beforeremove':function(){
Ext.Msg.alert('タブパネルイベント','beforeremoveイベント');
console.debug('タブパネルbeforeremove');
//return false;
},
'beforeclose':function(){
Ext.Msg.alert('タブパネルイベント','beforecloseイベント');
console.debug('タブパネルbeforeclose');
},
'close':function(){
Ext.Msg.alert('タブパネルイベント','closeイベント');
console.debug('タブパネルclose');
//return false;
},
'remove':function(){
Ext.Msg.alert('タブパネルイベント','removeイベント');
console.debug('タブパネルremove');
},
'beforedestroy':function(){
Ext.Msg.alert('タブパネルイベント','beforedestroyイベント');
console.debug('タブパネルbeforedestroy');
},
'destroy':function(){
Ext.Msg.alert('タブパネルイベント','destroyイベント');
console.debug('タブパネルdestroy');
}
},
});
});
・実行結果
Ext.TabPanelのイベントサンプルの実行結果
まず前提として基本的にタブパネル自体にクローズボタンは設定できません。（タイトルも設定できません。Ext.PanelよりExt.Viewportに近い感じです。）
タブパネル内のアイテムのパネル(以下アイテムパネル)がcloseされる時アイテムパネルのbeforeclose、closeイベントが働きます。クローズが実行されるとタブパネルに設定されているbeforeremove、removeイベントが働きます。タブパネル自体のcloseイベントは働きません。タブパネルのcloseイベントはタブパネル自体がクローズされたときに発火されるイベントです。このサンプルではタブパネル自体を閉じることはないのでbeforeclose,close,beforedestory,destoryイベントはよばれません。アイテムパネルのbeforeremove,removeも実効されません。つまりcloseとremoveの違いは、
- close → 自分自身のクローズ時
- remove → 自分の子となるアイテムが取り除かれた(リムーブされた)時
となります。
タブのクローズのキャンセル
アイテムパネルのbeforecloseイベント、もしくはタブパネルのbeforeremoveに設定されているハンドラでfalseを返すと、アイテムパネルのクローズの動作をキャンセルすることができます。ややこしいですね。アイテムパネルでもタブパネルでもキャンセルできてしまいます。
またfirebugでイベントハンドラの実行順序を見ると、以下のようになっています。
1.アイテムパネル beforeclose
↓
2.アイテムパネル close
↓
3.タブパネル beforeremove
↓
4.アイテムパネル beforedestroy (実際にアイテムパネルが閉じた場合)
↓
5.アイテムパネル destory (実際にアイテムパネルが閉じた場合)
↓
6.タブパネル remove (実際にアイテムパネルが閉じた場合)
アイテムパネルのクローズをキャンセルした場合は、3のタブパネルのremoveイベントまでしか呼ばれません。アイテムパネルのクローズのキャンセルはアイテムパネル自体のbeforecloseで処理するのがよさそうです。タブパネルのbeforeremoveでキャンセルした場合アイテムパネルのcloseイベントは実行されてしまいます。
似たような言葉が多いのでごちゃごちゃになりがちですが、注意しておきたいポイントです。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
[...] http://extjs.blog.sus4.co.jp/2009/11/24/ext-tutorial-tabpanel-closeevent/ [...]
第3回ExtJS勉強会
27 11 月 09 at 5:33 PM