Extjs如何动态加载Extjs脚本

JavaScript06

Extjs如何动态加载Extjs脚本,第1张

1、首先，需要先创建一个基本可用的 ExtJS 模板， 这个很简单， 如下所示：

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" type="text/css" href="http://localhost/ext-4/resources/css/ext-all.css" />

<script type="text/javascript" src="http://localhost/ext-4/ext-debug.js"></script>

</head>

<body>

</body>

</html>

2、需要引用的脚本是 ExtJS 根目录下的 ext-debug.js ， 不是 ext-all-debug.js， 这个文件非常小， 只有几百K ， 当让这个只是最基本的 ExtJS 组件， 不包括任何的界面功能。

3、配置 Ext.Loader 启用动态加载；

4、ExtJS 中的动态加载是由 Ext.Loader 来完成的， 默认不启用动态加载， 所以接下来需要做的事配置 Ext.Loader 启用动态加载， 在上面模板的 body 标签内添加如下代码：

<script type="text/javascript">

Ext.onReady(function() {

Ext.Loader.setConfig({

enabled: true,

disableCaching: false,

paths: {

Ext : '/ext-4/src'

}

})

})

</script>

注意：上面的代码启用了动态加载， 禁用了浏览器缓存， 以及指定了 ExtJS 的所部署的路径。

很正常，不要用autoload，用autoload你设成什么也没用。要用iframe

html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src='+ url + '></iframe>'

您需要的是一个动态加载的功能。判断哪些JS（或类）被加载过，而只加载没有的类库。

DOJO

有个动态加载的机制，但我没用过不好评论。

我的做法是用单独做一个JS包，尽可能少的依赖别的架构。用它实现动态加载。一是完成防止自身重复加载，二是有一个页面全局的注册机（一个HASH对象就可以搞定，很简单）

而程序要变的地方有两个，

首先，是所有的JS都用它加载，保障在注册机中的唯一性；

其次，在使用EXT类库的地方，需要等动态加载完以后才可以使用所有的EXT类库。类似的你可以写一个onReadyXXX()的方法。

另外，

相信您也看过动态加载JS的办法，这里还需要注意的一点是FF,IE,Safari对Document.write的JS加载办法处理不一样，IE是同步的，其它是异步的，所以在写这个动态加载类库里要由其注意。需要判断浏览器，要有不同的加载实现。