在Panel或者其子类的autoLoad属性或load(Object/String/Function)方法会调用
如果指定的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：
4066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
