Ext.Panel的autoLoad属性或load()方法说明

在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>ExtBoxComponent</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:

Ext.Panel的autoLoad属性或load()方法说明_第1张图片
 
先将 scripts属性去掉,然后点击“加载新内容”按钮: 
Ext.Panel的autoLoad属性或load()方法说明_第2张图片
再将scripts:true加上, 然后点击“加载新内容”按钮:

你可能感兴趣的:(Ext.Panel的autoLoad属性或load()方法说明)