`

EXT Tabpanel多标签实时监控中ajax请求的关闭控制解决办法

阅读更多
问题背景:利用Tabpanel来完成项目中实时监控任务的展现,ajax定时(隔10秒或5秒)后台请求
          数据。因此脚本要管理到每一个tabpanel与ajax请求的新增与关闭。
处理思路:用时间戳区分每一个产生的tab,每新增一个tab,则产生一个新的ajax请求对象,将
          新产生的tab与ajax都保存进入一个简单的数组或类哈希表的结构中。监听tab的关闭
          动作,消除对应的ajax请求对象和tab对象。
关键代码:
//存储实时监控任务数据请求的对象
var relTimeTaskHashMap = {
	Set : function(key, value) {
		this[key] = value
	},
	Get : function(key) {
		return this[key]
	},
	Contains : function(key) {
		return this.Get(key) == null ? false : true
	},
	Remove : function(key) {
		delete this[key]
	}
};
//存储tab对象
var chartHashMap = {
	Set : function(key, value) {
		this[key] = value
	},
	Get : function(key) {
		return this[key]
	},
	Contains : function(key) {
		return this.Get(key) == null ? false : true
	},
	Remove : function(key) {
		delete this[key]
	}
};
//ajax请求的守护对象,负责ajax请求发起和停止
function RealTimeTaskDefend(){
	var threadStatus;
	var callBackFunction;
	this.setCallBackFunction=function(callFunction){
		this.callBackFunction=callFunction;
	}
	this.run=function(){
		this.threadStatus=setInterval(this.callBackFunction,5000);
	}
	this.stop=function(){
		clearTimeout(this.threadStatus);
	}
}
//新增加一个tab需要完成的动作      
var realTimeTaskDefend = new RealTimeTaskDefend();
relTimeTaskHashMap.Set(tabPanelId, realTimeTaskDefend);
chartHashMap.Set(tabPanelId,'实时监控的展现对象入口');

//发起监控请求需要完成的动作
var realTimeTaskDefend_run = relTimeTaskHashMap.Get(tabpanelId)
    realTimeTaskDefend_run.setCallBackFunction('实时监控的数据处理方法入口');
    realTimeTaskDefend_run.run();

//结束监控请求需要完成的动作
var realTimeTaskDefend_stop  = relTimeTaskHashMap.Get(tabPanelId);
    realTimeTaskDefend_stop .stop();
    relTimeTaskHashMap.Remove(tabPanelId);
    chartHashMap.Remove(tabPanelId);

0
0
分享到:
评论

相关推荐

    extjs4.2.1 tabPanel刷新及关闭标签

    在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...

    Ext中的tabpanel关闭后再打开不显示的问题

    ### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新...

    Ext中TabPanel的动态页面加载

    在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...

    tapestry4.02中封装ext的TabPanel组件

    在本文中,我们将深入探讨 Tapestry 4.02 框架中封装的 Ext TabPanel 组件。Tapestry 是一个开源的Java Web 应用程序开发框架,它允许开发者使用简单的Java类和模板语言来创建动态、交互式的Web应用。而 Ext 是一个...

    ext-------竖向标签TabPanel

    竖向标签TabPanel-------------------------------------------------

    ext的tabpanel的激活与注意事项

    EXTJS的tabpanel是其组件库中的一个重要组成部分,用于创建具有多个选项卡的用户界面,每个选项卡代表一个独立的视图或工作区。在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且...

    ExtJS TabPanel 标签操作

    ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...

    treepanel 和 tabpanel 完整

    在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...

    可以拖拽的页签面板----Ext TabPanel

    1. **Ext.TabPanel**: `Ext.TabPanel` 是EXT JS库中的一个容器组件,它提供了多页签的视图,每个页签可以包含不同的面板或组件。它具有高度定制性,支持设置各种属性,如默认激活的页签、页签位置、页签样式等。 2....

    extjs动态添加tabpanel标签页支持pannel嵌入

    extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以

    ExtJS-3.4.0系列:Ext.TabPanel

    1. **配置项**:可以设置多个配置项来定制`TabPanel`的行为,如`activeTab`用于指定初始活动的标签,`tabPosition`控制标签的位置(顶部、底部、左侧或右侧),`plain`决定是否显示背景和边框等。 2. **事件监听**...

    ext_ext_knew7pi_ajax_

    对于网页标签,EXT提供了TabPanel组件,可以利用AJAX动态加载每个标签页的内容。窗口组件(Window)则可以通过AJAX获取远程数据,然后填充到窗口内部。这些功能增强了EXT应用的灵活性和可扩展性。 在`knew7pi`这个...

    ExtJS扩展:垂直页签tabPanel

    在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...

    Extjs4.2 设置tabpanel当前活动页签的样式

    在tabpanel中,每个面板对应一个标签页签,使用户可以在多个面板之间进行切换。当用户点击某个标签页签时,该标签页签将变为当前活动页签,并且其样式将发生变化。 要设置tabpanel当前活动页签的样式,可以添加CSS...

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip

    如何在MATLAB中做出标签页的效果-tabpanel2.6.zip 刚才看到有会员朋友说matlab中控件少,math说ActiveX中多的是啊,于是我也就顺便打开ActiveX看看里面都有什么。突然看到个单词tabbed……难道这就是困扰我多日的...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    TabPanel是ExtJS提供的一种布局管理器,它允许在一个容器中创建多个面板(Panels),每个面板有自己的标签,用户可以通过点击标签在不同的面板间切换。TabPanel可以方便地管理和展示大量的内容,尤其适合于构建复杂...

    Ext的Tab标签封装

    在ExtJS中,TabPanel是核心组件之一,用于实现多页面或区域的切换效果,类似于Web应用中的标签页。"Ext的Tab标签封装"指的是使用ExtJS库创建的TabPanel组件,它允许用户在一个区域内通过点击不同的标签来展示不同的...

    Ext.TabPanel

    TabPanel的使用,添加tab,加载页面,添加事件

    ExtJS tabPanel实例

    在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...

    ExtJS TabPanel beforeremove beforeclose使用说明

    在ExtJS中,TabPanel是常用的组件,用于展示多个面板(Panel)并提供标签页切换功能。当用户尝试关闭TabPanel中的某个Panel时,我们可能需要执行一些验证或确认操作,例如弹出对话框询问用户是否真的要关闭当前页面...

Global site tag (gtag.js) - Google Analytics