问题背景:利用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);
分享到:
相关推荐
在版本4.2.1中,`TabPanel`提供了丰富的API和方法来控制其行为,如刷新当前标签页、关闭特定标签页等。 #### 刷新当前标签页 在ExtJS 4.2.1中,要实现刷新当前标签页的功能,可以采用以下方式: ```javascript ...
### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中,`TabPanel`是一个非常重要的组件,用于实现页面中的多标签页功能。然而,在实际应用过程中可能会遇到一个常见问题:当某个标签页被关闭后,如果尝试重新...
在EXT JS这个强大的JavaScript库中,`TabPanel`是一个核心组件,用于实现多标签页界面。本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,...
在本文中,我们将深入探讨 Tapestry 4.02 框架中封装的 Ext TabPanel 组件。Tapestry 是一个开源的Java Web 应用程序开发框架,它允许开发者使用简单的Java类和模板语言来创建动态、交互式的Web应用。而 Ext 是一个...
竖向标签TabPanel-------------------------------------------------
EXTJS的tabpanel是其组件库中的一个重要组成部分,用于创建具有多个选项卡的用户界面,每个选项卡代表一个独立的视图或工作区。在EXTJS应用中,tabpanel提供了灵活的布局管理和用户交互功能,使开发者能够构建高效且...
ExtJS的TabPanel是其组件库中的一个核心组件,用于创建具有多个标签页的应用界面,每个标签页可以承载不同的内容。在本主题中,我们将深入探讨如何操作ExtJS的TabPanel,包括创建、添加、删除和切换标签页,以及...
在本文中,我们将深入探讨`TreePanel`和`TabPanel`这两个重要的Ext JS组件,并讨论如何将它们结合在一起,以创建功能丰富的用户界面。`TreePanel`用于展示层次结构的数据,而`TabPanel`则提供了多标签页的功能,两者...
1. **Ext.TabPanel**: `Ext.TabPanel` 是EXT JS库中的一个容器组件,它提供了多页签的视图,每个页签可以包含不同的面板或组件。它具有高度定制性,支持设置各种属性,如默认激活的页签、页签位置、页签样式等。 2....
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
在tabpanel中,每个面板对应一个标签页签,使用户可以在多个面板之间进行切换。当用户点击某个标签页签时,该标签页签将变为当前活动页签,并且其样式将发生变化。 要设置tabpanel当前活动页签的样式,可以添加CSS...
1. **配置项**:可以设置多个配置项来定制`TabPanel`的行为,如`activeTab`用于指定初始活动的标签,`tabPosition`控制标签的位置(顶部、底部、左侧或右侧),`plain`决定是否显示背景和边框等。 2. **事件监听**...
对于网页标签,EXT提供了TabPanel组件,可以利用AJAX动态加载每个标签页的内容。窗口组件(Window)则可以通过AJAX获取远程数据,然后填充到窗口内部。这些功能增强了EXT应用的灵活性和可扩展性。 在`knew7pi`这个...
在“ExtJS扩展:垂直页签tabPanel”这个主题中,我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签(tab)组件,这在很多情况下可以提供更好的用户界面体验。 首先,我们看到有两个JavaScript文件,TabPanel.js...
如何在MATLAB中做出标签页的效果-tabpanel2.6.zip 刚才看到有会员朋友说matlab中控件少,math说ActiveX中多的是啊,于是我也就顺便打开ActiveX看看里面都有什么。突然看到个单词tabbed……难道这就是困扰我多日的...
TabPanel是ExtJS提供的一种布局管理器,它允许在一个容器中创建多个面板(Panels),每个面板有自己的标签,用户可以通过点击标签在不同的面板间切换。TabPanel可以方便地管理和展示大量的内容,尤其适合于构建复杂...
在ExtJS中,TabPanel是核心组件之一,用于实现多页面或区域的切换效果,类似于Web应用中的标签页。"Ext的Tab标签封装"指的是使用ExtJS库创建的TabPanel组件,它允许用户在一个区域内通过点击不同的标签来展示不同的...
**TabPanel** 是ExtJS中的一个常用组件,可以用来组织多个面板或视图,每个面板可以通过选项卡的形式进行切换展示。在本例中,我们将重点介绍如何在TabPanel中的GridPanel(表格面板)中根据不同条件动态改变行的...
TabPanel的使用,添加tab,加载页面,添加事件
在ExtJS中,`tabPanel` 是一个非常重要的组件,它允许你在一个容器内创建多个标签页,每个标签页可以承载不同的内容,提供了类似桌面应用的用户体验。在实际开发中,`tabPanel` 经常被用来组织和展示复杂的信息。 `...