0

0

动态加载页面并执行的实例详解

零下一度

零下一度

发布时间:2017-07-18 15:21:36

|

2532人浏览过

|

来源于php中文网

原创

extjs 4.1 tabpanel动态加载页面并执行脚本,写这个东西我写了好几天,但是写完之后就会有满满的成就感,我终于成功了,挺兴奋的,下面就来向大家介绍我写代码的整个过程。

按照官方示例,可以动态加载页面,可是脚本不执行,于是查SDK、google,发现scripts需要设置为true,于是设置该属性,整个代码如下

tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
});

刚开始以为加载页面的脚本写的有问题,因为查了很多资料,有人说要写在

里面,有人说只能写在页面上,不能用src引用js文件,但无论怎么试也不行,我的加载页面很简单,只要页面被加载就出弹窗

后来想,是不是需要在tab被激活的事件手工load,而不是autoLoad,于是再次实验,终于成功了,兴奋!
tabPanel.add({
title: 'dynamic page',
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }
 listeners: { activate: function(tab){ tab.loader.load(); } }
});

本来想着到此为止,一天时间总算搞定这个tab,但是兴奋之余发现,该做法是有问题的,每次点击tab,都会触发激活事件,去读取后台页面一次,而我想要的效果是,前台加载一次之后,切换tab也不要再访问后台。于是查SDK、google,想在activate事件里,判断tab已经load,但是未果

第二天,去掉了listeners,然后莫名其妙想测试加载页面的loading效果,特意将页面线程阻止,加入以下代码

System.Threading.Thread.Sleep(5000);

这次是无心插柳,发现隔了5秒加载的页面,居然能正常执行脚本了!

我的操作步骤如下:点了加载按钮,然后点击动态加载的tab,该tab无内容,隔了5秒,内容出现,脚本执行

但是被加载的页面不能总是被sleep,于是继续查资料继续试,甚至开始调试extjs的源代码,这里说下如何调试,页面切换以下脚本

改为

如何调试就不解释了,google多的是,调试了一天,无果。不过对extjs的代码算是有了第一次亲密接触

而且还发现一个奇怪的事情,在调试的时候,就算加入了Sleep(5000),加载的页面脚本也无法执行,越来越纳闷

第三天,狂加QQ群,各论坛网站发帖,继续google,无果

第四天,算是我点幸,用微软的bing搜索autoload:true, scripts:true,出来的第条,就有这样的介绍,不过是讲extjs 4.0的panel如何加载页面执行脚本的,于是按照它的代码测试

Ext.onReady(function () {
  var panel = Ext.create('Ext.Panel', {
  title: 'Anchor
Layout',  
  renderTo:Ext.getBody(),  
  loader:{ url: "test.htm",autoLoad:true,
scripts:true}//加载1.htm页面
  });
  });

该代码居然能成功执行!这下彻底兴奋了,因为tab可以加载任意的component,当然也可以加载panel,于是修改我的代码

泪无痕工作室网站后台管理系统
泪无痕工作室网站后台管理系统

新闻,案例,下载及前台页全部生成HTML,属于全自动化、全智能的在线方式管理、维护、更新的网站管理系统功能说明:1.系统管理:管理员管理,可以新增管理员及修改管理员密码;添加管理员。并可以分配权限;生成前台页的HTML2.新闻管理:可以添加、删除、修改新闻,并批量生成所有记录的静态页面;3.案例管理:可以添加、删除、修改案例,并批量生成所有记录的静态页面;4.下载管理:可以添加、删除、修改下载程序

下载
var panel = Ext.create('Ext.Panel',{
title: 'dynamic page',
renderTo:Ext.getBody(),
closable: true,
loader: { 'test.htm', loadMask: 'loading...', autoLoad: true,
scripts: true }
});
tabPanel.add(panel);

成功了!真的狂喜,花费4天下来,总算是有个好的结果,这种喜悦,只有我们技术人员才能理解到

比较代码差异,发现就少了这么一个配置,就是我上面黄色标出来的,renderTo:Ext.getBody(),居然,居然要被render一下,才能正常显示脚本,为什么SDK没有!!

但是,但是……这也不是一个完美的解决办法,细心的朋友就知道,该脚本会把加载页面首先加载到主页面上,切换tab才会消失,这么严重的问题,因为当时太兴奋,居然没有发现,唉。

不得不停下敲键盘的手,仔细思考起来,我有3次加载页面执行脚本成功,这3次分别是

1、tab被activate的事件中

2、sleep之后点击tab等待页面加载好

3、加入renderTo配置

经过长时间思考,终于发现这3次成功的时候,都有个共同点,加载的页面被显示出来了,也就说,如果tab先load页面,然后再“被看见”,那脚本就不执行了

为了验证我的想法,于是马上动手测试,把sleep设为100毫秒,点击加载按钮,隔了1秒再去看加载出来的tab,果然脚本不执行了!!!

总算找到原因:tab必须先“展现”出来,然后再去load,那这就简单了,马上查SDK,不难发现show这个方法,于是修改代码

tabs.add({
title: 'dynamic page',
//renderTo: Ext.getBody(),
loader: {
url: 'test.htm',
loadMask: 'loading...',
autoLoad: true,
scripts: true
}
}).show();

OK,脚本正常执行,到此我的问题“完美”解决

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号