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 相关文章推荐
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
Aug 20 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 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开发大型项目的一点经验
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
php开发工具有哪五款
2015/11/09 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
php使用pear_smtp发送邮件
2016/04/15 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
jQuery实现的可编辑表格完整实例
2016/06/20 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
说说如何使用Vuex进行状态管理(小结)
2019/04/14 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python yield与实现方法代码分析
2018/02/06 Python
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
前台文员的岗位职责
2013/11/14 职场文书
门卫班长岗位职责
2013/12/15 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
2014年社区工作总结
2014/11/18 职场文书
基层党支部承诺书
2015/04/30 职场文书