在前面的基础上实现导航跳转功能,点击导航菜单,在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加载页面"中,我们可以理解为讨论的是如何在`TabPanel`组件中动态加载页面内容。这通常涉及到以下几个关键知识点: 1. **动态加载**:在用户点击某个标签时,只加载对应的页面内容,而不是一...
本篇文章将深入探讨如何在EXT JS的`TabPanel`中实现动态页面加载,这在构建可扩展且高效的Web应用时非常关键。通过动态加载,我们可以避免一次性加载所有标签页内容,从而改善用户体验,减少初次加载时的网络负担。 ...
4. TabPanel.script:这可能是JavaScript脚本文件,用于增强或扩展TabPanel组件的前端行为。在Tapestry中,有时需要自定义JavaScript来处理更复杂的交互逻辑,或者与服务器进行异步通信。这个文件可能包含了与...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
1. **渲染和布局**:确保TreePanel和TabPanel都能正确地在页面上渲染,各个组件的大小和位置符合预期。 2. **交互性**:测试节点点击事件是否能正确触发,TabPanel是否能根据事件切换到相应的标签页。 3. **性能**:...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
在Ajax的帮助下,tabpanel可以实现在不刷新整个页面的情况下加载新的内容。 5. **右键菜单和事件驱动**:右键菜单是常见的交互元素,通常包含一系列上下文相关的操作。在Ajax应用中,通过监听鼠标右键点击事件,...
此外,注意`autoLoad`属性可以用来动态加载外部HTML内容,`scripts: true`确保页面中的脚本也能执行。但这种方法可能会带来安全和性能上的问题,因此在实际应用中需谨慎使用。 总结,ExtTabPanel是构建多标签界面的...
- 当遇到IE浏览器特有的问题时,可以考虑使用`Ext.onReady`来封装相关代码逻辑,确保脚本在页面DOM完全加载后才被执行。 4. **使用`Ext.state.Manager.setProvider()`:** - 对于状态管理,可以通过设置`Ext....
这个项目文件可能包含了Web表单、CSS样式、JavaScript脚本以及服务器端代码,展示了如何集成和配置Tabs控件。通过研究该项目,你可以深入理解AJAX控件在实际开发中的运用,以及如何提升网站的用户界面和交互体验。 ...
1. 异步加载:当用户点击一个新的标签时,使用AJAX发送请求到服务器,获取对应的内容数据,然后动态地将这些数据插入到对应的内容区域,这样用户就可以在不等待整个页面刷新的情况下查看新内容。 2. 数据缓存:对于...
当遇到“Sys未定义”的错误时,这通常意味着客户端脚本库没有正确加载。解决这个问题,我们需要在web.config中添加对`.asmx`文件的处理,以确保ScriptManager能够加载ASP.NET AJAX库。 总之,ASP.NET AJAX控件提供...
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责实现客户端的交互功能,增强用户界面。在本主题中,我们关注的是"javascript 经典tab控件",这是一种常见的网页组件,用于组织和展示多块内容,...
页面加载完毕后,EXTJS会执行`Ext.onReady`函数中指定的代码,这是EXTJS应用的一个关键启动点。例如: ```javascript Ext.onReady(function() { alert("ExtJS库已加载!"); }); ``` 这里,`Ext.onReady`函数...
在ASP.NET中,我们可以使用各种控件来构建用户界面,其中Tab选项卡控件是一种常见且实用的元素,用于在单一页面上组织和展示多个相关的但独立的信息区域,提升用户体验。 在"ASP.NET-[其他类别]Tab选项卡控件及Demo...
- **客户端脚本库**:除了服务器端组件外,框架还提供了一组JavaScript库,用于增强页面的动态效果,如弹出对话框、动态加载内容等。 - **控件工具包**:为了进一步简化开发过程,ASP.NET AJAX框架还附带了一个...
ASP.NET选项卡控件是一种常见的用户界面元素,用于在单个视图中组织大量内容,让用户可以方便地在多个页面或部分之间切换,而无需实际加载新的页面。这些控件通常用于网页设计,以提高用户体验,减少页面滚动,并...
在页面加载时,需要确保所有必要的资源都已正确配置。这些资源主要包括: 1. **ExtJs核心资源**: - `extEngine/ext-all.js`: 包含所有ExtJs功能的主脚本文件。 - `extEngine/adapter/ext/ext-base.js`: 适配器...
- **Ext.onReady**: 此方法用于确保DOM完全加载完成后再执行指定的JavaScript代码,确保页面内的所有元素可以被脚本引用。 - **示例代码**: ```javascript Ext.onReady(function() { alert("Congratulations! You...
综上所述,文章深入探讨了基于Ext的单页系统设计方法,强调了面向对象编程思想在客户端JavaScript中的应用,以及如何利用Ext的组件化和动态数据加载特性优化用户体验。通过这种方式,开发者能够构建出高效、易于维护...