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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JavaScript中常见的八个陷阱总结
Jun 28 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
vue+echarts实现多条折线图
Mar 21 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设计模式之装饰者模式代码实例
2015/05/11 PHP
yii2缓存Caching基本用法示例
2016/07/18 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue2.0实现前端星星评分功能组件实例代码
2018/02/12 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Vue.js点击切换按钮改变内容的实例讲解
2018/08/22 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
Python制作爬虫抓取美女图
2016/01/20 Python
Python实现随机选择元素功能
2017/09/14 Python
浅谈Python处理PDF的方法
2017/11/10 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Django中的Model操作表的实现
2018/07/24 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
医学专业毕业生个人的求职信
2013/12/04 职场文书
工厂仓管员岗位职责
2014/01/01 职场文书
高中毕业生登记表自我鉴定范文
2014/03/18 职场文书
公司捐款倡议书
2014/05/14 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
python中pycryto实现数据加密
2022/04/29 Python