extjs4.1 和struts2结合使用时延迟加载js，可使用extjs的mvc模式

直奔主题，在前台我们点击左边的菜单会先打开一个tab页，希望将请求的页面放到新打开的tab页上面：关键代码如下：

tabPanel.add({
	id: id,
	title: title,
	closable: true,
	autoScroll: true,
	layout: 'fit',
	loader: {
		scripts: true,
		autoLoad: true,
		params: params,
		url: url
	}
});

传统的方法是在tab里面嵌入一个iframe,然后在里面嵌入一个独立的页面，这样做的话会重复引入很多重复的js，而且不能共享一些公共的对象；

而上面的这种做法只会引入本次需要的js代码，达到延迟加载的目的。具体步骤为：先请求struts2的action，返回一个jsp页面，在页面上只引入本次需要的js代码

<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript" src="${scripts}/UserIndex.js"></script>

返回到浏览器后会执行引入的js代码，UserIndex.js关键代码如下：

Ext.onReady(function() {
	Ext.QuickTips.init();
	var deptTree = Ext.create('auth.DepartmentTreePanel', {
		columnWidth : .3,
		height: 722,
		rootNode : {
			id : '00',
			 text :'总裁',
			 expanded : true
		 }
	});
	var queryForm = Ext.create('auth.QueryForm');
	var userGrid = Ext.create('auth.UserGrid');
	var content = Ext.create('Ext.panel.Panel', {
 		id : 'T_auth-userIndex_content',
		layout : 'column',
		 getQueryForm : function() {
			 return queryForm;
		},
 		getUserGrid : function() {
			return userGrid;
 		},
		getDeptTree : function() {
 			return deptTree;
		},
		 items : [ deptTree, {
			 xtype : 'container',
			columnWidth : .7,
 			items : [ queryForm, userGrid ]
 		}]
	});
	Ext.getCmp('T_auth-userIndex').add(content);
});

这段代码的主要意思是创建本次需要显示的panel: content,然后把content加入到我们刚才创建的tab上面，这里的T_auth-userIndex和我们上面tabPanle.add里面的id的值是一样的。

jsp中引入的js还可以用mvc来实现，例子如下：

templateIndex.jsp

<%@ page language="java" pageEncoding="UTF-8"%>  

<script type="text/javascript">
	Ext.ns("excel.TemplateIndex");
	excel.TemplateIndex.scripts="${scripts}";
</script>
<script  type="text/javascript" src="${scripts}/templateIndex/app.js"></script>

app.js

Ext.Loader.setConfig({
    enabled: true
}); 

Ext.define('excel.TemplateIndex', {
    extend: 'Ext.app.Application',
    name: 'excel_TemplateIndex',
    appFolder:excel.TemplateIndex.scripts + "/templateIndex",
    controllers: [
        'TemplateIndexController'
    ],
    launch: function() {
		Ext.getCmp('T_excel-templateIndex').add( [{
			xtype:'excel_TemplateIndexView'
		}]);
    }
});

Ext.onReady(function(){
	Ext.create("excel.TemplateIndex");
});
 

mvc的目录结构图如下：

比较两种js的写法，一个是传统的js写法，一种是mvc模式，mvc模式将逻辑和页面分开，结构清晰，便于维护。传统的写法将逻辑和页面放到一起，代码过多是会不便于维护，建议使用mvc的模式。