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

时间:2022-07-26 14:38:20

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

知道extjs是很久以前的事情,但是一直没有机会用到。不怕大家笑话,直到上个星期准备用它了,这才开始接触,没想到一开始就碰到难题。TablePanel动态加载页面很简单的,官方有示例,但是我加载的页面需要执行脚本,为了这个功能,研究了足足4天。看来我把extjs想的太简单了,还是需要对它深入了解下。

第一天,按照官方示例,可以动态加载页面,可是脚本不执行,于是查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,脚本正常执行,到此我的问题“完美”解决

之所以打引号,因为还有一个小小的问题,一直没有解决,想请教各位,为什么loadMask这个配置没有效果,只有在activate事件中才有效果呢?