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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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
CodeIgniter CLI模式简介
2014/06/17 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP异常处理Exception类
2015/12/11 PHP
php查询内存信息操作示例
2019/05/09 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
JavaScript toFixed() 方法
2010/04/15 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python中文件遍历的两种方法
2014/06/16 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python制作动态字符图的实例
2019/01/27 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
总经理驾驶员岗位职责
2013/12/04 职场文书
结婚典礼证婚词
2014/01/08 职场文书
开会迟到检讨书
2014/01/08 职场文书
班班通项目实施方案
2014/02/25 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
民事起诉状范文
2015/05/19 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书