ExtJS TabPanel beforeremove beforeclose使用说明

当前系统使用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();
}

但是这样的话，情况如下：
 
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; } }
});

再运行，查看效果：
 
搞定想必点击Panel上的关闭按钮时，应该是首先执行的所在TabPanel容器的Remove事件，然后再执行Panel自身的Close事件；项目赶时间，没过多时间深究了，小弟也是对JS和Extjs了解不深，有路过熟知的朋友望告知真实原因。

赞 (0)

相关推荐

  • 关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()

    问题:当使用hide()方法和setvisible(false)方法去除items的中间(见过很多例子移除的都是尾部表单)表单后,原form验证无效 解决办法:使用remove(id)方法移除表单,可得到有效的form 原因:未知,希望大家补充 补充:下面是一个我遇到问题代码的简化版本,没有经过测试,大概意思是要是在form里想控制不显示表单,用remove()方法有效 复制代码 代码如下: new Ext.form.FormPanel({ id : 'ReportForm',items : [

  • ArrayList在for循环中使用remove方法移除元素方法介绍

    有时候我们需要在一个ArrayList的for循环中动态删除元素的需求, 废话不多说看代码 List<Integer> list = new ArrayList<Integer>(); list.add(0); list.add(1); list.add(2); list.add(3); list.add(4); list.add(5); list.add(6); list.add(7); //正常循环 for (int i = 0; i < list.size(); i++

  • ExtJS TabPanel beforeremove beforeclose使用说明

    ExtJS TabPanel beforeremove beforeclose使用说明

    当前系统使用Extjs做为前端框架,系统首页布局采用border方式,左边手风琴式的菜单栏,中间区域为TabPanel容器,点击左边菜单栏内的对应菜单在中间区域添加对应的Panel,Panel嵌入添加的gridview: 当前问题是,想在用户关闭时弹出对话框提示用户,根据用户选择是否销毁当前页面(Panel),或是隐藏当前Panel,保存临时数据: 查看Extjs API文档,对添加的panel监听beforeclose事件 主要代码如下 中间区域部分: 复制代码 代码如下: //centerP

  • extjs tabpanel限制选项卡数量实现思路及代码

    复制代码 代码如下: var tabIndex = 'shouye'; var tabIndex2 = 'shouye'; var tabIndex3 = 'shouye'; var tabIndex4 = 'shouye'; var tabIndex5 = 'shouye'; var tabIndex6 = 'shouye'; var tabIndex7 = 'shouye'; /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param no

  • Extjs中通过Tree加载右侧TabPanel具体实现

    Extjs中通过Tree加载右侧TabPanel具体实现

    最近在做一个物流管理的项目,公司必须要求用Extjs4.1来做界面,因为以前一直也没有接触过所以开发的过程中遇到了很多的困难.同时Extjs4.1的资料在网上也相对来说较少.好了,不说废话上代码: 1.左侧的功能树 复制代码 代码如下: Ext.define("AM.view.SystemTree", { extend : 'Ext.tree.Panel', alias : 'widget.systemTree', rootVisible : false,// 不展示ROOT disp

  • ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport第1/3页

    通过此文能学习到如下内容 1.创建一个简单的面板 Ext.Panel 2.制作一个可以拖动的面板 Ext.Panel 3 .使用选项卡面板 3.使用Ext.Viewport搭一个简单布局(用一个小例子来总结本文所有内容) 面板是ExtJs控件的基础,很多控件都是在面板的基础上扩展的,或者他会与其他控件之间有关系. 面板由一个工具栏.一个底部工具栏.面板头部.面板尾部和面板主区域几个部分组成.面本类中还提供了面板展开.关闭等功能.并提供了一些可重用的工具按钮让我们灵活的控制面板.面板可以放入其他任

  • ExtJS正则表达式使用说明

    复制代码 代码如下: Ext.onReady(function(){      Ext.QuickTips.init();}); ExtJS的Regex的验证属性分两种情况,一种是只有红色提示框:另一种是在提示框边会出现一个类似批注的提示信息,不过在页面加载时要加上Ext.QuickTips.init();提示框才能正常显示出来.特别提示:在属性regex后要用 /^ 这里加正则 $/ 把上面的正则表达式包起来 否则会报"缺少对象":例子: 复制代码 代码如下: { xtype:'te

  • 学习ExtJS fit布局使用说明

    一.Fit布局,子元素将自动填满整个父容器(对元素设置宽度无效),如果容器组件中有多个子元素,则只会显示第一个子元素. 二.应用举例 复制代码 代码如下: Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody(), title:"容器组件", layout:"fit", width:500, height:100, items:[{title:"子元素1",html:"

  • 基于ExtJs在页面上window再调用Window的事件处理方法

    今天在开发Ext的过程中遇到了一个恶心的问题,就是在ext.window页面,点击再次弹出window时,gridpanel中的store数据加载异常,不能正常被加载,会出现缓存,出现该问题,是因为window窗口弹出时,两个window同时存在,并且在两个window交替使用时,需要先将一个窗口关闭,关闭时,会对window的缓存进行清理,这样就能保证store数据的正确加载.分享给大家,供参考. var actInfoWindow2; function showCallFlowInfoWin

  • Extjs实现下拉菜单效果

    Extjs实现下拉菜单效果

    本文实例为大家分享了Extjs实现下拉树效果,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" type="text/css" href="../../../ext-4.2.1/resourc

  • 学习ExtJS Panel常用方法

    一.属性 frame:布尔类型true 或 false ,为true时表示边框为圆角且具有背景色,取false则反之. xtype:在EXTJS的可视化组件部署中的一种机制,即通过指定xtype的值,来告诉容量如何初始化所包含的级件,如xtype:"textfiled",表示使用Ext.form.TextFile来进行初始化当前组件. xtype Class ------------- ------------------ box Ext.BoxComponent button Ext

  • Extjs入门之动态加载树代码

    Extjs入门之动态加载树代码

    Extjs动态加载树,首先在数据库里面设计存放树信息的表 复制代码 代码如下: USE [KimiExtjs] GO /****** 对象: Table [dbo].[Trees] 脚本日期: 04/08/2010 22:12:25 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[Trees]( [Tid] [varchar](40) COLLA

随机推荐