一般我们在网页中中引用html或jsp文件,都是在页面文件中通过一下方式静态的引用
<script type="text/javascript" src="./js/PlanApply/monthrepairinfo.js"></script>
在js文件数量少的情况下还可以接受,当js文件较多时,如果都这样使用静态方式加载,会增加浏览器的负担,如果能改为动态加载,需要时才加载要用到的js文件,这样可以一定程度上提高浏览器的浏览速度,Extjs提供了require方法来动态加载js文件
要使用动态加载,首先要设置Ext.Loader的enabled配置项为true,在Ext的API文档中,原文如下
enabled : Boolean
Whether or not to enable the dynamic dependency loading feature.
Defaults to: false
Available since: 4.0.0
它写到默认为false,使用发现其实为true,所以使用时可以不管Loader,使用默认值
test.js
/**
* 定义一个方法,用来显示Form
*/
function displayForm()
{
var win=Ext.create("js.test",{
title:'动态加载js测试页面',
height:300,
width:300
});
win.show();
}
/**
* 定义一个类
*/
Ext.define('js.test',{
extend:'Ext.window.Window'
}) ;
Ext.onReady
另一个js文件handler.js中要动态调用,handler.js在页面中使用静态调用,当点击一个按钮时,对test.js进行动态加载
require成功后有一个回调函数,在这里我们调用test.js中的displayForm方法显示界面
function btnClick(optype){
Ext.require('js.test',function(){
displayForm();
})
}
说明:上面两段代码中都有 ‘js.test’,在不使用Loader的paths做路径设置的前提下,代表js文件的路径形式, ‘js.test’ 就代表 js/test.js,即网站目录下的js文件夹下面的test.js文件,所以自定义的类名和require的第一个参数要保持一致。