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 数字转换研究总结
Dec 26 Javascript
javascipt:filter过滤介绍及使用
Sep 10 Javascript
原生javascript实现Tab选项卡切换功能
Jan 12 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
JavaScript生成指定范围的时间列表
Mar 19 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
Element Rate 评分的使用方法
Jul 27 Javascript
axios封装与传参示例详解
Oct 18 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使用curl发送json格式数据实例
2013/12/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jQuery简单实现隐藏以及显示特效
2015/02/26 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
Python创建xml的方法
2015/03/10 Python
python字符串与url编码的转换实例
2018/05/10 Python
对python Tkinter Text的用法详解
2018/10/11 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
Ubuntu20下的Django安装的方法步骤
2021/01/24 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
教师实习自我鉴定
2013/12/14 职场文书
竞选演讲稿范文
2013/12/28 职场文书
运动会广播稿30字
2014/01/21 职场文书
保险内勤岗位职责
2014/04/05 职场文书
县长群众路线对照检查材料思想汇报
2014/10/02 职场文书
关于学习的决心书
2015/02/05 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
治庸问责工作总结
2015/08/11 职场文书