ExtJs 4.*、Guice3、MyBatis3、MySql架构的 弱权限管理框架 四

前台部分代码解释，对于使用过ext的来说，看得懂前面结构不难，但也有值得借鉴的地方，即整个页面只加载一次 ext 所需要的资源包，自定义js动态加载，这样就大大的减轻了

程序的加载负担，加快的加载速度和解析速度，并且也避免了原来每个页面都引入ext的资源问价造成的对浏览器 的内存泄露。

登陆后，只有main.jsp中引入的ext的资源包，其他界面已打开tab，tab中引入jsp的方式打开界面

main.jsp

main.jsp就这么简单，当然你可能说没看见ext的资源包啊，他在yepnope.jsp中，yepnope一个js加载工具，不在多说，用和不用，你说了算。

tab中动态引入jsp，并打开界面，有个方法，是别人写的，即chenxin那个作者，我现在升级为ext4了，看部分代码

index.menuTree = Ext.create("Ext.tree.Panel", {    useArrows : true,// 设置为true将在树中使用Vista-style的箭头autoScroll : true,animate : true,// 设置为true以启用展开/折叠时的动画效果containerScroll : true,// 设置为true向ScrollManager注册此容器border : false,rootVisible : false,// 设置为false将隐藏root节点margins : '2 2 0 0',    store : Ext.create('Ext.data.TreeStore', {fields : ['id', 'text', 'iconCls', 'expanded', 'leaf', 'url'],root : {expanded : true,id : 'Tree'},    proxy : {type : 'ajax', url : index.treeMenu}    }),    listeners: {        'itemclick': function (view, record, item, index, e, eOpts) { // 点击事件            if (record.data.url) { // 如果是链接 node.isLeaf()            var u = record.data.url;//                Share.openTab(record, ctx + u);            } else {                e.stopEvent();            }        }    }});

菜单树的节点单击事件，调用了一个方法， Share.openTab(record, ctx + u);该方法，看代码

Share.openTab = function (record, url, parentTab, iconCls) {    var id = record.data.id,     title = record.data.text,    // 设置在哪个元素打开     tabPanel = parentTab === undefined ? index.tabPanel : parentTab,     css = iconCls === undefined ? record.data.iconCls : iconCls;    // 参数验证    if (!tabPanel || title == "" || url == "" || id == "") {        Ext.Msg.alert("错误", "参数错误.", function () {            return false;        });        return;    }    var url = encodeURI(encodeURI(url));    // tab页不存在的场合    var tab = Ext.getCmp(id);    if (!tab) {        var newTab = {            id : id,title : title,iconCls : css,closable : true,autoScroll : false,border : false,loader : {url : url, loadMask : 'loading...', autoLoad : true, scripts : true,params : {            id : id + "_div"        }    },            listeners : {activate : function(panel) {// 自动调节高度和宽度var inPanel = Ext.getCmp(panel.id + "_div_panel");if (inPanel) {inPanel.setHeight(index.tabPanel.getHeight() - 30);//inPanel.setWidth(Panel.getWidth());inPanel.doLayout(true, true);}},close : function (panel, eOpts) {// 用于IE内存泄露，效果还可以，几个都起作用。。。。。                Ext.destroy(Ext.getCmp(panel.id + "_div_panel"));Ext.removeNode(Ext.getDom(panel.id + "_div_panel"));                Ext.destroy(panel);                if (Ext.isIE) {    CollectGarbage();    }                }}        };        tabPanel.add(newTab).show();// 限制最多能开10个tabvar s = tabPanel.items.length;if (s > 10) {var firstTab = tabPanel.items.items[0];if (firstTab) {tabPanel.remove(firstTab);}}    } else {// tab页已经存在的场合// tab.getUpdater().update(autoLoad);tabPanel.setActiveTab(tab);}}

大体意思是用了 ext panel当中的 loader 属性用来加载jsp，在jsp当中，定义一个div，并且还得生成一个变量，在引入的js中会用到

<%@ page language="java" contentType="text/html; charset=UTF-8"%><%@ include file="/resources/common-jsp/taglibs.jsp"%><div id="${param.id}"></div><script type="text/javascript">var param_id = "${param.id}";</script><script type="text/javascript" src="${ctx}/views/js/user/user.js"></script>

在引入的js中，例如user.js中

user.myPanel = Ext.create("Ext.panel.Panel", {id : param_id + '_panel',//renderTo : 'user_panel_id',renderTo : param_id,//renderTo : '${param.id}',layout : 'fit',boder : false,height : index.tabPanel.getHeight() - 30,width : index.tabPanel.getWidth() - 10,items : [ user.grid ]});

对应jsp生成的div和变量就用到了，一个是 id 一个是 renderTo。