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文件无法以合适的方式进行删除,以至于程序调试时每次都要清空缓存来调试页面。非常不方便。
如有达人对此有所建议,还望多多提醒。