ExtJS TabPanel beforeremove beforeclose使用说明
更新时间：2010年03月31日 20:20:16 作者：
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
当前系统使用Extjs做为前端框架，系统首页布局采用border方式，左边手风琴式的菜单栏，中间区域为TabPanel容器，点击左边菜单栏内的对应菜单在中间区域添加对应的Panel，Panel嵌入添加的gridview；
当前问题是，想在用户关闭时弹出对话框提示用户，根据用户选择是否销毁当前页面(Panel)，或是隐藏当前Panel，保存临时数据；
查看Extjs API文档，对添加的panel监听beforeclose事件
主要代码如下
中间区域部分：
//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: '系统日志'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}
但是这样的话，情况如下：
Panel在'beforeclose'前已经关闭了；后来上网Google，查阅资料，忽然想到TabePanel作为容器是不是要在其处先进行事件拦截？于是修改中间区域部分代码如下//centerPanel
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首页'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//首先监听beforeremove事件
, listeners: { beforeremove: function(ct,component ) { return false; } }
});
再运行，查看效果：
搞定想必点击Panel上的关闭按钮时，应该是首先执行的所在TabPanel容器的Remove事件，然后再执行Panel自身的Close事件；项目赶时间，没过多时间深究了，小弟也是对JS和Extjs了解不深，有路过熟知的朋友望告知真实原因。
当前问题是，想在用户关闭时弹出对话框提示用户，根据用户选择是否销毁当前页面(Panel)，或是隐藏当前Panel，保存临时数据；
查看Extjs API文档，对添加的panel监听beforeclose事件
主要代码如下
中间区域部分：
复制代码 代码如下:
//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: '系统日志'
, iconCls: 'tabs'
, closable: true
, bodyStyle: 'padding:10px'
, items: CMUAMS_LogGrid
, listeners: { beforeclose:TabCloseConfirm }
})
activeCMUAMS_LogTab.show();
}
但是这样的话，情况如下：
Panel在'beforeclose'前已经关闭了；后来上网Google，查阅资料，忽然想到TabePanel作为容器是不是要在其处先进行事件拦截？于是修改中间区域部分代码如下//centerPanel
复制代码 代码如下:
centerPanel = new Ext.TabPanel({
id: 'centerPnl'
, region: 'center'
, border: false
, iconCls: 'tabs'
, enableTabScroll: true
, items: [{
title: '首页'
, autoScroll: true
}]
, defaults: { autoScroll: true }
//首先监听beforeremove事件
, listeners: { beforeremove: function(ct,component ) { return false; } }
});
再运行，查看效果：
搞定想必点击Panel上的关闭按钮时，应该是首先执行的所在TabPanel容器的Remove事件，然后再执行Panel自身的Close事件；项目赶时间，没过多时间深究了，小弟也是对JS和Extjs了解不深，有路过熟知的朋友望告知真实原因。
相关文章
ExtJS 工具栏 分页事件参数使用说明。2010-03-03
基于ExtJs在页面上window再调用Window的事件处理方法
下面小编就为大家带来一篇基于ExtJs在页面上window再调用Window的事件处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
本文为大家介绍下在NumberField后面加单位，具体实现如下，感兴趣的朋友可以参考下2013-07-07
在Ext的使用过程中，一不留心就出现了乱码，包括在客户端提交给服务器的数据中出现了乱码和服务器端返回给客户端的数据中出现了乱码，下面简单分析一下出现乱码的原因。2009-04-04
在切换tabpanel的时候，把相应的工具栏隐藏掉，结果出现空白，先熊板板的空白不过后来终于解决，接下来与大家分享下解决技巧，感兴趣的朋友可以参考下哈2013-04-04
Extjs中DisplayField的日期或者数字格式化扩展
在用Extjs的时候，有时需要对 Ext.form.DisplyField 进行格式化。2010-09-09
这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验，作为一个程序员是需要不断学习的，喜欢的朋友可以学习下2013-08-08
Ext JS中的Ext.Date可以看作是JavaScript中date的加强版,提供了许多进阶的日期操作函数,下面我们就来看一下Ext JS框架中日期函数的用法及日期选择控件的实现2016-05-05
Extjs是从yui-ext发展来的一套ajax控件，是一套完整的富客户端解决方案，也因为功能完整，ext-all.js有400多k（最新的extjs3.2.0 有600多k），以为是基于js和css的功能实现，对客户端机器性能也有一定的要求，比如对ie6以下版本的不支持。2010-04-04
最近学ajax，接触到了Extjs这个强大的框架。我想通过我的学习笔记，最后可以让大家上手在项目中使用Ext。首先我会写一些基本的用于入门Ext的文章，打好基础是很重要的。2008-12-12
最新评论