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个tab
		var 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。