论坛首页 Web前端技术论坛

TabPanel中加载页面时不执行页面上的js脚本

浏览 3562 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2010-01-06   最后修改:2010-01-15
   在前面的基础上实现导航跳转功能,点击导航菜单,在TabPanel中打开一个新Tab,在新Tab页中加载对应的页面,页面是跳转了可是页面中的js脚本却没执行。
   跳转页面body部分内容很简单
  
   //脚本部本
   <script type="text/javascript">
   Ext.onReady(function(){
   function doTest()
   {
       var el=Ext.get('test');
       var bcolor=el.getStyle('background-color');
       if(bcolor=='transparent'){
       	el.setStyle('background-color','red');
       }else{
       	el.setStyle('background-color','transparent');
       }
   } 
   Ext.get('bt').on('click',doTest);
   });
   //body部分
   <body>
   	<p>This is body of page!</p>
   	<input id='bt' type="button" style="width:70px" value="测试"> 
   	<div id="test">
   		<p>这是test层中的内容,点击测试之后背景有变化</p>
   	</div> 
   </body>
   

   没有弹出对话框,这不成了静态的了么... ...
   google之,第一种方法是叫用Ext.ux.IFrameComponent(here),没找到Ext.ux.IFrameComponent,放弃。
   再google之,发现第二种最简单且有效的方法,在TabPanel中加载页面是通过配置TabPanel的autoload属性实现的,autoload: {url:'页面路径'},只要加一个srcipts: true选项就可以了,另外还可以指定一个callback函数,ok!只要能执行js就能做出想要的效果...
  
   var autoLoad = {
   						url : href,//包含url值的变量
   						scripts:true,//执行页面js代码
   						callback: this.callback
   					};
   
   callback: function(){
   				alert("This is callback");
   			}
   

  
   效果如下
   页面加载时
  
   点击“测试”按钮后
  

希望踩的朋友也能留下宝贵批评意见,也能使我从中有所收获不断进步,不甚感激!


   发表时间:2010-03-01  
请问,点击菜单栏怎么才能在新的Tab中打开页面呢?
0 请登录后投票
   发表时间:2010-12-21   最后修改:2010-12-21
jlboy 写道
请问,点击菜单栏怎么才能在新的Tab中打开页面呢?

 

 

var tab.add({
	id : "id",
	title : "标题",
	iconCls : 'new-tab',
	autoScroll : true,
	autoLoad : {
		url : "打开tab要加载的页面路径",
		scripts : true
	},
	closable : true,
	listeners: {activate: function(e, target, panel){
		//监听打开tab事件
	}}
}).show();

tabPanel.setActiveTab(tab);
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics