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

将一个页面下的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. 



“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

neoeson

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值