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