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 相关文章推荐
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
JavaScript异步操作中串行和并行
Nov 20 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运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
Laravel 5.3 学习笔记之 错误&日志
2016/08/28 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
js实现京东轮播图效果
2017/06/30 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
用python对oracle进行简单性能测试
2020/12/05 Python
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
酒店管理毕业生自荐信
2014/05/25 职场文书
党性教育心得体会
2014/09/03 职场文书
公司停电通知
2015/04/15 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
python 模拟在天空中放风筝的示例代码
2021/04/21 Python
浅谈JS的二进制家族
2021/05/09 Javascript
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
Javascript 解构赋值详情
2021/11/17 Javascript
angular异步验证器防抖实例详解
2022/03/31 Javascript