extjs4.1 和struts2结合使用时延迟加载js,可使用e

页面导航:首页 > 网络编程 > JavaScript > extjs4.1 和struts2结合使用时延迟加载js,可使用e

extjs4.1 和struts2结合使用时延迟加载js,可使用e

来源: 作者: 时间:2016-02-05 11:06 【

直奔主题,在前台我们点击左边的菜单会先打开一个tab页,希望将请求的页面放到新打开的tab页上面:关键代码如下:tabPanel add({id: id, title: title, closable: true,autoScroll: true,layout:

直奔主题,在前台我们点击左边的菜单会先打开一个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的值是一样的。



中引入的js还可以用m来实现,例子如下:

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的模式。

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<