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 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
leaflet的开发入门教程
Nov 17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
荐书|您有一份JavaScript书单待签收
Jul 21 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 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
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
php商品对比功能代码分享
2015/09/24 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
Python中property属性实例解析
2018/02/10 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
django中间键重定向实例方法
2019/11/10 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
欧洲著名的二手奢侈品网站:Vestiaire Collective
2020/03/07 全球购物
求职信格式范本
2013/11/15 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
初中教师个人工作总结
2015/02/10 职场文书
离职证明格式样本
2015/06/12 职场文书