ExtJS 4.1 TabPanel动态加载页面并执行脚本

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

tabPanel.add({

title: 'dynamic page',

closable: true,

loader: { 'test.htm', loadMask: 'loading...', autoLoad: true, scripts: true }

});

刚开始以为加载页面的脚本写的有问题，因为查了很多资料，有人说要写在<body>里面，有人说只能写在页面上，不能用src引用js文件，但无论怎么试也不行，我的加载页面很简单，只要页面被加载就出弹窗

<script type="text/javascript">

alert("addd");

</script>

后来想，是不是需要在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的源代码，这里说下如何调试，页面切换以下脚本

<script type="text/javascript"
src="/Scripts/ext/ext-all.js"></script>改为

<script type="text/javascript"
src="/Scripts/ext/ext-debug.js"></script>

如何调试就不解释了，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，于是修改我的代码

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，脚本正常执行，到此我的问题“完美”解决

转自:http://blog.sina.com.cn/s/blog_a5f093b4010176l3.html

ExtJS 4.1 TabPanel动态加载页面并执行脚本【转】的更多相关文章

  1. 爬虫再探实战（三）———爬取动态加载页面——selenium

    自学python爬虫也快半年了,在目前看来,我面临着三个待解决的爬虫技术方面的问题:动态加载,多线程并发抓取,模拟登陆.目前正在不断学习相关知识.下面简单写一下用selenium处理动态加载页面相关的 ...

  2. Python+Selenium爬取动态加载页面（2）

    注: 上一篇<Python+Selenium爬取动态加载页面(1)>讲了基本地如何获取动态页面的数据,这里再讲一个稍微复杂一点的数据获取全国水雨情网.数据的获取过程跟人手动获取过程类似,所 ...

  3. Python+Selenium爬取动态加载页面（1）

    注: 最近有一小任务,需要收集水质和水雨信息,找了两个网站:国家地表水水质自动监测实时数据发布系统和全国水雨情网.由于这两个网站的数据都是动态加载出来的,所以我用了Selenium来完成我的数据获取. ...

  4. div动态加载页面

    div动态加载页面 /* /// method 1 var url="<%=basePath%>/qne.do?p=pessegerCountSet"; $.post( ...

  5. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  6. PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题

    PageSlider中CSS3动画在除首屏之外先加载页面后执行动画的问题,PageSlider中加入CSS3动画的话,默认只有首屏是从无到有执行动画,其他屏都是显示下页面再执行动画 这就造成其他屏的动 ...

  7. 爬虫再探实战（四）———爬取动态加载页面——请求json

    还是上次的那个网站,就是它.现在尝试用另一种办法——直接请求json文件,来获取要抓取的信息. 第一步,检查元素,看图如下: 过滤出JS文件,并找出包含要抓取信息的js文件,之后就是构造request ...

  8. jQuery实现滚动时动态加载页面内容

    有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...

  9. js实用方法记录-js动态加载css、js脚本文件

    js实用方法记录-动态加载css/js 附送一个加载iframe,h5打开app代码 1. 动态加载js文件到head标签并执行回调 方法调用:dynamicLoadJs('http://www.yi ...

随机推荐

  1. CMDB介绍

    CMDB https://lupython.gitee.io/2018/05/05/CMDB%E4%BB%8B%E7%BB%8D/ 尚泽凯博客地址 传统运维与自动化运维的区别 传统运维: ​ 1.项目 ...

  2. PHP中的面向对象魔术方法大全

    1.__construct  构造方法 2.__destruct  析构方法 3.__get 获取成员值 4.__set 设定成员值 5.__isset 判断成员值 6.__unset unset成员 ...

  3. ESP32 学习笔记 - 环境搭建

    打开终端 输入命令 sudo apt-get install gcc git wget make libncurses-dev flex bison gperf python python-seria ...

  4. （数据科学学习手札30）朴素贝叶斯分类器的原理详解&Python与R实现

    一.简介 要介绍朴素贝叶斯(naive bayes)分类器,就不得不先介绍贝叶斯决策论的相关理论: 贝叶斯决策论(bayesian decision theory)是概率框架下实施决策的基本方法.对分 ...

  5. python2.7入门---break语句&continue语句&pass空语句

        这篇文章记录的就是比较好玩的东西了,也是比较重要的.咱们先来看一下break语句.Python break语句,就像在C语言中,打破了最小封闭for或while循环.break语句用来终止循环 ...

  6. PHP.42-TP框架商城应用实例-后台17-商品属性3-商品分类的修改与删除

    商品分类的修改 1.改表单Goods/edit.html,加下拉框 2.因为商品属性修改涉及商品属性表goods_attr{id,attr_value,attr_id,goods_id}与属性表att ...

  7. 初步学习pg_control文件之四

    接前文,初步学习pg_control文件之三  继续分析 何时出现 DB_SHUTDOWNING状态: 在正常的shutdown的时候,需要进行checkpoint,所以就在此处,设置pg_contr ...

  8. netty源码分析系列文章

    netty源码分析系列文章 nettynetty源码阅读netty源码分析  想在年终之际将对netty研究的笔记记录下来,先看netty3,然后有时间了再写netty4的,希望对大家有所帮助,这个是 ...

  9. ArcGIS Server远程处理服务器（环境设置）

    当使用ArcGIS Server做远程处理服务器执行影像处理操作时,提示ERROR 999999通用错误代码,如下: Start Time: Mon Jul 03 13:49:06 2017Distr ...

  10. ubuntu自带的ibus输入法问题解决方法

    ubuntu自带的ibus有点问题,输入字的时候不知道是个什么模式. 在网上搜到一个解决方法. 终端下执行: ibus-daemon -drx 然后切换到拼音输入法,就正常了. 写下作为记录.