extJS环境下tabPanel的切换事件、监听事件、刷新或重新载入

最新推荐文章于 2018-10-15 11:46:00 发布

原创最新推荐文章于 2018-10-15 11:46:00 发布 · 1.9w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #tabPanel #切换panel #重新刷新 #tabPanel事件

本文介绍了在ExtJS环境中，如何处理TabPanel的切换事件、监听事件以及如何刷新或重新载入TabPanel内容。在拆分的两个panel间切换时，若需根据第一个界面的操作更新第二个界面，可通过监听'beforeshow'、'activate'或'tabchange'事件来实现。同时，文章提供了一种判断iframe是否存在并刷新的解决办法，并提醒注意deferredRender属性对于表单渲染的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将一个页面下的tabPanel拆分为两个panel，但是当第一个界面操作后，第二个界面的内容可能有变化，需要刷新或重新载入界面！

切换Tab时，页面刷新重载！

激活tab时，页面刷新重载！

此时的操作，试了好久！找到了各种方法！都没有实现！以下为最终实现方法：

环境： MyEclipse6.5 extjs2.0

源代码：

<script type="text/javascript">
	Ext.onReady(function(){
		var tabPanel = new Ext.TabPanel({
			renderTo: Ext.getBody(),
			height: document.body.clientHeight,
			width: document.body.clientWidth,
			bodyStyle: "overflow: hidden",
			activeTab: 0,
		    items: [{
		    		<span style="white-space:pre">	</span>id:'tab1',
					title: '全业务',
					html: "<iframe src='multiPerformance.do?method=initKeyportReportSearchData' width='100%' height='100%'/>"
				
				},{
					id:'tab2',
		        	<span style="white-space:pre">	</span>title: '已收藏端口',
					html: "<iframe id='iframe' name='ifrmname' src='multiPerformance.do?method=collectedPortPerformanceMain' width='100%' height='100%'/>"
			}]
		});
	});
	</script>

解决方法有好几种，只要extJS的方法用对就可以了。

我的方案：

isteners:{'beforeshow':function(){
	<span style="white-space:pre">	</span>代码 
	}每次点击都会触发。

这个监听事件是每次点击panel标题时，首先执行的操作！

html: "<iframe id='iframe' name='ifrmname' src='multiPerformance.do?method=collectedPortPerformanceMain' width='100%' height='100%'/>",
					listeners:{'beforeshow':function(){
						if(Ext.get('iframe')){
								<span style="color:#ff0000;">Ext.get('iframe').dom.src="multiPerformance.do?method=collectedPortPerformanceMain&p="+Math.random();</span>
							}
						}
					}

当获取id为iframe的框架不为空，执行红色标记的代码；

首次进入界面时，第二个panel并没有点击激活，页面没有加载；此时获取dom将报null的错误；所以，必须先判断iframe的panel是否存在；

<span style="color:#ff0000;">Ext.get('iframe').dom.src="multiPerformance.do?method=collectedPortPerformanceMain&p="+Math.random();</span>

代码的功能是：iframe的dom文档，更改src，同时，更改的src加了一个随机数；

以下是我查资料过程中用到的代码，仅供参考。

有其他实现的方法，欢迎留言！

extJS 中TabPanel 切换的点击事件：isteners:{'beforeshow':function(){
代码
}每次点击都会触发。
tab.on('activate',function(tab){
//your code....tab是被激活的tab页面,
})

// window.location.reload(); // 整个页面刷新

在每一个tab页面上加上activate事件,tab.on('activate',function(tab){
//your code....tab是被激活的tab页面,
})
listeners:{'tabchange':function(){
Ext.get('iframe').dom.src="multiPerformance.do?method=collectedPortPerformanceMain&p="+Math.random();
}
}
获取dom时，页面必须已经加载过，否则，获取结果为null;

deferredRender : Boolean 默认只加载激活的tab页，未激活的不加载；设置为false时，加载所有tab；
内置地，Tab面板是采用Ext.layout.CardLayout的方法管理tabs。此属性的值将会传递到布局的Ext.layout.CardLayoutdeferredRender配置值中，以决定tab面板是否只有在第一次访问时才渲染（缺省为true）。Internally, the TabPanel uses a Ext.layout.CardLayout to manage its tabs. This property will be passed on to the layout as its Ext.layout.CardLayoutdeferredRender config value, determining whether or not each tab is rendered only when first accessed (defaults to true).
注意如果将deferredRender设为true的话，又使用form的话，那表示只有在tab激活之后，全部的表单域（Fields）才会被渲染出来，也就是说不管是提交表单抑或是执行getValues或setValues都是无用。Be aware that leaving deferredRender as true means that, if the TabPanel is within a form, then until a tab is activated, any Fields within that tab will not be rendered, and will therefore not be submitted and will not be available to either getValues or setValues.