ExtJS TabPanel beforeremove beforeclose使用說明
更新時間：2010年03月31日 20:20:16 作者：
ExtJS 關(guān)閉TabPanel內(nèi)的Panel時使用TabPanel的'beforeremove’和其內(nèi)的Panel的'beforeclose’事件彈出關(guān)閉確認提示對話框
當前系統(tǒng)使用Extjs做為前端框架，系統(tǒng)首頁布局采用border方式，左邊手風琴式的菜單欄，中間區(qū)域為TabPanel容器，點擊左邊菜單欄內(nèi)的對應菜單在中間區(qū)域添加對應的Panel，Panel嵌入添加的gridview；
當前問題是，想在用戶關(guān)閉時彈出對話框提示用戶，根據(jù)用戶選擇是否銷毀當前頁面(Panel)，或是隱藏當前Panel，保存臨時數(shù)據(jù)；
查看Extjs API文檔，對添加的panel監(jiān)聽beforeclose事件
主要代碼如下
中間區(qū)域部分：
//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首頁'
, autoScroll: true
}]
, defaults: { autoScroll: true }
});增加一個新的Panelfunction addCMUAMS_LogTab() {
activeCMUAMS_LogTab = centerPanel.add({
id: 'CMUAMS_LogShowAll'
, title: '系統(tǒng)日志'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}
但是這樣的話，情況如下：
Panel在'beforeclose'前已經(jīng)關(guān)閉了；后來上網(wǎng)Google，查閱資料，忽然想到TabePanel作為容器是不是要在其處先進行事件攔截？于是修改中間區(qū)域部分代碼如下//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首頁'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//首先監(jiān)聽beforeremove事件
, listeners: { beforeremove: function(ct,component ) { return false; } }
});
再運行，查看效果：
搞定想必點擊Panel上的關(guān)閉按鈕時，應該是首先執(zhí)行的所在TabPanel容器的Remove事件，然后再執(zhí)行Panel自身的Close事件；項目趕時間，沒過多時間深究了，小弟也是對JS和Extjs了解不深，有路過熟知的朋友望告知真實原因。
當前問題是，想在用戶關(guān)閉時彈出對話框提示用戶，根據(jù)用戶選擇是否銷毀當前頁面(Panel)，或是隱藏當前Panel，保存臨時數(shù)據(jù)；
查看Extjs API文檔，對添加的panel監(jiān)聽beforeclose事件
主要代碼如下
中間區(qū)域部分：
復制代碼 代碼如下:
//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首頁'
, autoScroll: true
}]
, defaults: { autoScroll: true }
});增加一個新的Panelfunction addCMUAMS_LogTab() {
activeCMUAMS_LogTab = centerPanel.add({
id: 'CMUAMS_LogShowAll'
, title: '系統(tǒng)日志'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}
但是這樣的話，情況如下：
Panel在'beforeclose'前已經(jīng)關(guān)閉了；后來上網(wǎng)Google，查閱資料，忽然想到TabePanel作為容器是不是要在其處先進行事件攔截？于是修改中間區(qū)域部分代碼如下//centerPanel
復制代碼 代碼如下:
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首頁'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//首先監(jiān)聽beforeremove事件
, listeners: { beforeremove: function(ct,component ) { return false; } }
});
再運行，查看效果：
搞定想必點擊Panel上的關(guān)閉按鈕時，應該是首先執(zhí)行的所在TabPanel容器的Remove事件，然后再執(zhí)行Panel自身的Close事件；項目趕時間，沒過多時間深究了，小弟也是對JS和Extjs了解不深，有路過熟知的朋友望告知真實原因。
相關(guān)文章
ExtJS 工具欄 分頁事件參數(shù)使用說明。2010-03-03
基于ExtJs在頁面上window再調(diào)用Window的事件處理方法
下面小編就為大家?guī)硪黄贓xtJs在頁面上window再調(diào)用Window的事件處理方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Extjs NumberField后面加單位實現(xiàn)思路
本文為大家介紹下在NumberField后面加單位，具體實現(xiàn)如下，感興趣的朋友可以參考下2013-07-07
在Ext的使用過程中，一不留心就出現(xiàn)了亂碼，包括在客戶端提交給服務器的數(shù)據(jù)中出現(xiàn)了亂碼和服務器端返回給客戶端的數(shù)據(jù)中出現(xiàn)了亂碼，下面簡單分析一下出現(xiàn)亂碼的原因。2009-04-04
Extjs 3.3切換tab隱藏相應工具欄出現(xiàn)空白解決
在切換tabpanel的時候，把相應的工具欄隱藏掉，結(jié)果出現(xiàn)空白，先熊板板的空白不過后來終于解決，接下來與大家分享下解決技巧，感興趣的朋友可以參考下哈2013-04-04
Extjs中DisplayField的日期或者數(shù)字格式化擴展
在用Extjs的時候，有時需要對 Ext.form.DisplyField 進行格式化。2010-09-09
這篇文章的主題是分享下我使用 ExtJS 操作 DOM 元素的一些經(jīng)驗，作為一個程序員是需要不斷學習的，喜歡的朋友可以學習下2013-08-08
Ext JS框架中日期函數(shù)的用法及日期選擇控件的實現(xiàn)
Ext JS中的Ext.Date可以看作是JavaScript中date的加強版,提供了許多進階的日期操作函數(shù),下面我們就來看一下Ext JS框架中日期函數(shù)的用法及日期選擇控件的實現(xiàn)2016-05-05
Extjs是從yui-ext發(fā)展來的一套ajax控件，是一套完整的富客戶端解決方案，也因為功能完整，ext-all.js有400多k（最新的extjs3.2.0 有600多k），以為是基于js和css的功能實現(xiàn)，對客戶端機器性能也有一定的要求，比如對ie6以下版本的不支持。2010-04-04
最近學ajax，接觸到了Extjs這個強大的框架。我想通過我的學習筆記，最后可以讓大家上手在項目中使用Ext。首先我會寫一些基本的用于入門Ext的文章，打好基礎是很重要的。2008-12-12