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

本文介绍了一种基于Extjs的模块化方法,并详细解释了如何通过动态加载JavaScript组件来实现模块的按需初始化。此外,文中还讨论了动态加载机制在调试过程中遇到的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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文件无法以合适的方式进行删除,以至于程序调试时每次都要清空缓存来调试页面。非常不方便。

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


       



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值