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 相关文章推荐
jQuery统计上传文件大小的方法
Jan 24 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jquery图片切换插件
Mar 16 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JavaScript箭头函数_动力节点Java学院整理
Jun 28 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
Aug 01 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 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正确解析UTF-8字符串技巧应用
2012/11/07 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
PHP安全下载文件的方法
2016/04/07 PHP
php语法检查的方法总结
2019/01/21 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
2014/04/02 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
大学毕业感言
2014/01/10 职场文书
请假条范文大全
2014/04/10 职场文书
怎样写离婚协议书
2014/09/10 职场文书
殡葬服务心得体会
2014/09/11 职场文书
婚礼答谢礼品
2015/01/20 职场文书
宾馆安全管理制度
2015/08/06 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python