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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
Jun 01 Javascript
通过vue写一个瀑布流插件代码实例
Sep 07 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 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计算日期相差天数实例分析
2016/02/23 PHP
PHP重载基础知识回顾
2020/09/10 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
javascript prototype 原型链
2009/03/12 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
用Python中的__slots__缓存资源以节省内存开销的方法
2015/04/02 Python
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
Django 多环境配置详解
2019/05/14 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
pymysql模块的操作实例
2019/12/17 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
css3的transform中scale缩放详解
2014/12/08 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Bitiba意大利:在线宠物商店
2020/10/31 全球购物
计算机应用专业毕业生求职信
2013/10/24 职场文书
出国考察邀请函
2014/01/21 职场文书
个人培训自我鉴定
2014/03/28 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
会议营销主持词
2015/07/03 职场文书
运动员加油词
2015/07/18 职场文书
mysql数据库隔离级别详解
2022/06/16 MySQL