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

   在前面的基础上实现导航跳转功能,点击导航菜单,在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");
   			}
   

  
   效果如下
   页面加载时
   TabPanel中加载页面时不执行页面上的js脚本_第1张图片
   点击“测试”按钮后
   TabPanel中加载页面时不执行页面上的js脚本_第2张图片

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


你可能感兴趣的:(JavaScript,PHP,脚本,ext,Google)