ExtJS TabPanel beforeremove beforeclose使用说明


Posted in Javascript onMarch 31, 2010

当前系统使用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(); 
}

但是这样的话,情况如下:
ExtJS TabPanel beforeremove beforeclose使用说明 
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; } } 
});

再运行,查看效果:
ExtJS TabPanel beforeremove beforeclose使用说明 
搞定想必点击Panel上的关闭按钮时,应该是首先执行的所在TabPanel容器的Remove事件,然后再执行Panel自身的Close事件;项目赶时间,没过多时间深究了,小弟也是对JS和Extjs了解不深,有路过熟知的朋友望告知真实原因。
Javascript 相关文章推荐
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
十个优秀的Ajax/Javascript实例网站收集
Mar 31 #Javascript
javascript中的107个基础知识收集整理 推荐
Mar 29 #Javascript
jquery CSS选择器笔记
Mar 29 #Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 #Javascript
javascript delete 使用示例代码
Mar 29 #Javascript
JavaScript 格式字符串的应用
Mar 29 #Javascript
js DataSet数据源处理代码
Mar 29 #Javascript
You might like
PHPlet在Windows下的安装
2006/10/09 PHP
转换中文日期的PHP程序
2006/10/09 PHP
怎样在UNIX系统下安装MySQL
2006/10/09 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
某科技软件测试面试题
2013/05/19 面试题
班组安全员工作职责
2014/02/01 职场文书
教师节演讲稿
2014/05/06 职场文书
关于颐和园的导游词
2015/01/30 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang