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

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");
   			}
   

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

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


分享到:
评论
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中打开页面呢?

相关推荐

    TabPanel 加载页面

    在给定的标题"TabPanel加载页面"中,我们可以理解为讨论的是如何在`TabPanel`组件中动态加载页面内容。这通常涉及到以下几个关键知识点: 1. **动态加载**:在用户点击某个标签时,只加载对应的页面内容,而不是一...

    Ext中TabPanel的动态页面加载

    本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,我们可以避免一次性加载所有标签页内容,从而改善用户体验,减少初次加载时的网络负担。 ...

    tapestry4.02中封装ext的TabPanel组件

    4. TabPanel.script:这可能是JavaScript脚本文件,用于增强或扩展TabPanel组件的前端行为。在Tapestry中,有时需要自定义JavaScript来处理更复杂的交互逻辑,或者与服务器进行异步通信。这个文件可能包含了与...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    再探Ext中TreePanel控件和TabPanel控件搭配测试

    1. **渲染和布局**:确保TreePanel和TabPanel都能正确地在页面上渲染,各个组件的大小和位置符合预期。 2. **交互性**:测试节点点击事件是否能正确触发,TabPanel是否能根据事件切换到相应的标签页。 3. **性能**:...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    关于Ajax+js+struts2实例的极品网站推荐

    在Ajax的帮助下,tabpanel可以实现在不刷新整个页面的情况下加载新的内容。 5. **右键菜单和事件驱动**:右键菜单是常见的交互元素,通常包含一系列上下文相关的操作。在Ajax应用中,通过监听鼠标右键点击事件,...

    ExtTabPanel文档tab嵌套tab.pdf

    此外,注意`autoLoad`属性可以用来动态加载外部HTML内容,`scripts: true`确保页面中的脚本也能执行。但这种方法可能会带来安全和性能上的问题,因此在实际应用中需谨慎使用。 总结,ExtTabPanel是构建多标签界面的...

    EXT开发过程中的心得

    - 当遇到IE浏览器特有的问题时,可以考虑使用`Ext.onReady`来封装相关代码逻辑,确保脚本在页面DOM完全加载后才被执行。 4. **使用`Ext.state.Manager.setProvider()`:** - 对于状态管理,可以通过设置`Ext....

    AJAX控件Tabs

    这个项目文件可能包含了Web表单、CSS样式、JavaScript脚本以及服务器端代码,展示了如何集成和配置Tabs控件。通过研究该项目,你可以深入理解AJAX控件在实际开发中的运用,以及如何提升网站的用户界面和交互体验。 ...

    Tab控件(类型于AJAX里的TAB控件)

    1. 异步加载:当用户点击一个新的标签时,使用AJAX发送请求到服务器,获取对应的内容数据,然后动态地将这些数据插入到对应的内容区域,这样用户就可以在不等待整个页面刷新的情况下查看新内容。 2. 数据缓存:对于...

    AJAX控件ppt、AJAX控件ppt

    当遇到“Sys未定义”的错误时,这通常意味着客户端脚本库没有正确加载。解决这个问题,我们需要在web.config中添加对`.asmx`文件的处理,以确保ScriptManager能够加载ASP.NET AJAX库。 总之,ASP.NET AJAX控件提供...

    javascript 经典tab控件

    JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互功能,增强用户界面。在本主题中,我们关注的是"javascript 经典tab控件",这是一种常见的网页组件,用于组织和展示多块内容,...

    EXTJS学习文档 适合初学者

    页面加载完毕后,EXTJS会执行`Ext.onReady`函数中指定的代码,这是EXTJS应用的一个关键启动点。例如: ```javascript Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` 这里,`Ext.onReady`函数...

    ASP.NET-[其他类别]Tab选项卡控件及Demo源码.zip

    在ASP.NET中,我们可以使用各种控件来构建用户界面,其中Tab选项卡控件是一种常见且实用的元素,用于在单一页面上组织和展示多个相关的但独立的信息区域,提升用户体验。 在"ASP.NET-[其他类别]Tab选项卡控件及Demo...

    ASP.NET_ajax.pdf

    - **客户端脚本库**:除了服务器端组件外,框架还提供了一组JavaScript库,用于增强页面的动态效果,如弹出对话框、动态加载内容等。 - **控件工具包**:为了进一步简化开发过程,ASP.NET AJAX框架还附带了一个...

    asp.net选项卡

    ASP.NET选项卡控件是一种常见的用户界面元素,用于在单个视图中组织大量内容,让用户可以方便地在多个页面或部分之间切换,而无需实际加载新的页面。这些控件通常用于网页设计,以提高用户体验,减少页面滚动,并...

    ExtJs部署及使用方法

    在页面加载时,需要确保所有必要的资源都已正确配置。这些资源主要包括: 1. **ExtJs核心资源**: - `extEngine/ext-all.js`: 包含所有ExtJs功能的主脚本文件。 - `extEngine/adapter/ext/ext-base.js`: 适配器...

    doc格式 ext EXT 中文手册

    - **Ext.onReady**: 此方法用于确保DOM完全加载完成后再执行指定的JavaScript代码,确保页面内的所有元素可以被脚本引用。 - **示例代码**: ```javascript Ext.onReady(function() { alert("Congratulations! You...

    基于Ext的单页系统设计与研究.pdf

    综上所述,文章深入探讨了基于Ext的单页系统设计方法,强调了面向对象编程思想在客户端JavaScript中的应用,以及如何利用Ext的组件化和动态数据加载特性优化用户体验。通过这种方式,开发者能够构建出高效、易于维护...

Global site tag (gtag.js) - Google Analytics