`
yadsun
  • 浏览: 180227 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

脚本EXTJavaScriptGooglePHP
阅读更多
   在前面的基础上实现导航跳转功能，点击导航菜单，在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");
   			}

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

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

分享到：
| Ext与服务端通信的方法
评论
2 楼 253405050 2010-12-21  
<div class="quote_title">jlboy 写道</div>
<div class="quote_div">请问，点击菜单栏怎么才能在新的Tab中打开页面呢？</div>
<p> </p>
<p> </p>
<pre name="code" class="js">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);</pre>
1 楼 jlboy 2010-03-01  
请问，点击菜单栏怎么才能在新的Tab中打开页面呢？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics