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 array 数组详解
Mar 22 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
Apr 15 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
May 06 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
十个优秀的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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php object转数组示例
2014/01/15 PHP
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
WebView启动支付宝客户端支付失败的问题小结
2017/01/11 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python3调用R的示例代码
2018/02/23 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
Python中安装easy_install的方法
2018/11/18 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python梯度下降算法的实现
2020/02/24 Python
Python基于requests库爬取网站信息
2020/03/02 Python
详解pandas映射与数据转换
2021/01/22 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
药剂专业个人求职信范文
2014/04/29 职场文书
科学发展观活动总结
2014/08/28 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS