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代码
Nov 10 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
Jun 02 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作的文本留言本的例子(四)
2006/10/09 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
javascript计算星座属相(十二生肖属相)示例代码
2014/01/09 Javascript
js取模(求余数)隔行变色
2014/05/15 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
Python队列的定义与使用方法示例
2017/06/24 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
Numpy之reshape()使用详解
2019/12/26 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
瑜伽国际:Yoga International
2018/04/18 全球购物
行政文员岗位职责
2013/11/08 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
淘宝店策划方案
2014/06/07 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers