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