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的开发个代阴影的对话框效果代码
Jul 28 Javascript
jquery easyui使用心得
Jul 07 Javascript
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
JS实现iframe自适应高度的方法示例
Jan 07 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 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缓存技术的多种方法小结
2012/08/14 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
重定向实现代码
2006/11/20 Javascript
javascript Keycode对照表
2009/10/24 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
jQuery中实现text()的方法
2019/04/04 jQuery
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
python访问sqlserver示例
2014/02/10 Python
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python+selenium实现简历自动刷新的示例代码
2019/05/20 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
金融专业推荐信
2013/11/14 职场文书
财政专业求职信范文
2014/02/19 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技