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 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
Node.js文件操作详解
Aug 16 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
JS对象是否拥有某属性如何判断
Feb 03 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
详解vue 模版组件的三种用法
2017/07/21 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
JavaScript错误处理操作实例详解
2019/01/04 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python实现登录接口的示例代码
2017/07/21 Python
Django数据库表反向生成实例解析
2018/02/06 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python 忽略文件名编码的方法
2020/08/01 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
生物制药自我鉴定
2014/01/25 职场文书
学习决心书范文
2014/03/11 职场文书
三八妇女节活动总结
2014/05/04 职场文书
合伙经营协议书范本
2014/09/13 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书
怎样写观后感
2015/06/19 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python