http://blog.163.com/artsn@126/blog/static/365332812011229105238777/

陈修恒

浏览: 204641 次
性别:
来自: 北京

最近访客更多访客>>

stingice

wangcz

wangning1125

liaohanfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ext

来源： http://blog.163.com/artsn@126/blog/static/365332812011229105238777/

在Panel或者其子类的autoLoad属性或load(Object/String/Function)方法会调用Ext.Updater 的update(Object options)方法来加载指定的url资源。

如果指定的url资源中含有javascript脚本，并且我们希望执行此脚本，而不是作为响应文本。这时我们就需要在options中指定scripts属性值为true。这样加载的资源就是javascript脚本执行后的资源信息了。

比如下来代码，一个panel在加载一个BoxComponent.html的页面，这个页面有一个红色背景、id='myDiv'的层，然后有一段javascript脚本将改变'myDiv'层的大小。

创建panel脚本：

<script type="text/javascript">
Ext.onReady(function() {
    var myPanel = new Ext.Panel({
       id:'myPanel',
       renderTo:Ext.getBody(),
       title:'我的面板',
       collapsible:true,
       floating:true,
       buttons:[{text:'加载新内容',handler:function(){Ext.getCmp('myPanel').load({url:'BoxComponent.html',scripts:true});}},{text:'返回'}],
       width:400,
       height:300
    });
    myPanel.getEl().center();
});
</script>
BoxComponent.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ext之BoxComponent</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="../ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
    var myComponent = new Ext.BoxComponent({
       id:'myCmp',
       el:'myDiv',
       style:'background-color:red;position:absolute;',
       pageX:10,
       pageY:10,
       resetSize:function(w,h){
           this.autoHeight=false;
           this.autoWidth=false;
           this.setWidth(w);
           this.setHeight(h);
       }
    });

    myComponent.render();
    if(confirm("将组件大小设置成800*600的大小?")){
       myComponent.resetSize(800,600);
    }
});
</script>
</head>
<body>
<div id="myDiv">hello world!</div>
</body>
</html>
运行效果图如下：

显示panel：

先将scripts属性去掉，然后点击“加载新内容”按钮：

再将scripts:true加上，然后点击“加载新内容”按钮：

分享到：

JAVA EE 下载，文件名显示中文 | response.setHeader("Cache-Control","no-c ...

2012-04-15 12:02
浏览 1826
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论