在Extjs模块化程序中动态加载js文件

来源:互联网 发布:淘宝店铺经营地址海外 编辑:程序博客网 时间:2024/05/22 01:55

1. 本Extjs模块化的方式是参考的 http://microboat.iteye.com/blog/182682 的方法

2. 在模块中:

Ext.extend(main.module,{ init:function(){ // load js this.loadJS("js/modules/modScoreManage/GridStudent.js",this.onLoadJS.createDelegate(this));},onLoadJS:function(){// 创建Module中所需对象this.sm = new Ext.grid.RowSelectionModel({ singleSelect:true }); ...this.gridStudent = new modScoreManage.GridStudent(this.sm,this.cmScore);    // 添加事件 this.gridStudent.getTopToolbar().findByType('button')[0].on('click',this.onBtnEdit,this);this.gridStudent.getTopToolbar().findByType('button')[1].on('click',this.onBtnDelete,this); // 将母体组件添加到this.main(那个tab)中this.body = this.gridStudent;this.main.add(this.body);this.main.doLayout();},getJsM:function(f){    var reg = /\/(\w+)\./;      jF = f.match(reg);    return jF[jF.length-1];},loadJS:function(js, callback){    var id = this.getJsM(js);    var scriptId = document.getElementById(id);    if(scriptId)    {          callback();    }    else    {            var script = document.createElement("script");              script.id = id;              script.type = "text/javascript";            if (callback)            {                  script.onload = script.onreadystatechange = function()                {                    if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete')                    {                        return;                    }                      script.onreadystatechange = script.onload = null;                      callback();                };            }              script.src = js;            var head = document.getElementsByTagName('head').item(0);              head.appendChild (script);    }}...


将 loadJS 的回调函数与 Ext 的 createDelegate 方法配合使用,保证了外部js文件加载完成后再进行模块的初始化。

这样实现了动态加载模块中中所需的js组件。

不过这里面仍然有问题没有解决:

 动态加载的js文件无法以合适的方式进行删除,以至于程序调试时每次都要清空缓存来调试页面。非常不方便。

如有达人对此有所建议,还望多多提醒。


       



原创粉丝点击