您的位置：首页 > Web前端 > JavaScript

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

2016-07-19 16:38 483 查看


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事件中才有效果呢？
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航