一. 页面JSP代码如下
<% String userName = (String)request.getAttribute("username"); %> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //{1} 定义主框架头panel var headPanel = new Ext.Panel({ border: false, layout:'anchor', region:'north', height:36, items: [{ xtype:'box', el:'headPanel', border:false, anchor: 'none -25' } ] }); //退出系统 function logoutclick(){ Ext.Msg.confirm("警告","是否退出系统?",function re(o){ if('yes'==o){ window.close(); } } ); } //{2} 定义主框架功能菜单panel var menuPanel = new Ext.Panel({ region: 'west', id: 'west-panel', title: '功能菜单', split: true, width: 200, minSize: 175, maxSize: 400, collapsible: true, autoScroll:false, margins: '0 0 0 2', layout:'accordion', layoutConfig:{ animate: true, activeItem :0 }, addmenu:function(list){ var menulist=list; if(list!=null&&list!='undefind') for(var i=0;i<menulist.length;i++){ var obj=menulist[i]; //建立菜单树 var tree=new Ext.tree.TreePanel({ id:'__menupanel__'+obj.id, title:obj.text, border: false, iconCls: 'icon-password', xtype:'treepanel', rootVisible: false, autoScroll:true, tools:[{ id:'refresh', qtip: '刷新', handler: function(event, toolEl, panel){ panel.getRootNode().reload(); } }], root: new Ext.tree.AsyncTreeNode({id:obj.id,text:obj.text}), listeners: { click: function(node,event) { if(node.leaf){ //后台传递过来的属性值都通过node.attributes进行获取 addTab(node.id,node.text,node.attributes.handle_represent) } } //加载节点 ,beforeload:function(node){ node.loader= new Ext.tree.TreeLoader( {dataUrl:'<%=basepath%>/menumanage/querymenu_list.action?p_menu_code='+node.id+'&username='+'<%=userName%>'} ); } } }); menuPanel.add(tree); }// end of for }// end of addmenu });// end of menuPanel //{3} 定义主框架操作区域panel var optRegionPanle = new Ext.TabPanel({ region: 'center', deferredRender: false, activeTab: 0, margins: '0 2 0 0', enableTabScroll:true, items: [{ title: '我的工作台', //autoLoad:{url:'userFastMenu.action',scripts:true}, autoLoad:'body.jsp', closable: false, autoScroll: false }] }); var fs; Ext.onReady(function(){ Ext.QuickTips.init(); //加载菜单 menuPanel.addmenu(${menulist}); var viewport = new Ext.Viewport({ layout: 'border', frame:true, items: [headPanel,menuPanel,optRegionPanle] }); }); //增加一个TAB,存在则直接显示 function addTab(id,title,url){ //存在该节点就转向,没有则新增 var tab = optRegionPanle.getComponent("_tab_" + id); //判断不存在tab且树的节点为叶子 if (!tab){ tab = optRegionPanle.add({ id:"_tab_"+id, title:title, iconCls: 'tabs', closable:true, html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src=<%=basepath%>'+url+' id=_tabcontent_'+id+'></iframe>' }); } optRegionPanle.setActiveTab(tab); } </script> </head> <body scroll="no"> <div id="headPanel"> <table width="100%" height="36" border="0" cellpadding="0" cellspacing="0" background="images/top-bg2.gif"> <tr> <td width="800" background="image/control.jpg" align="right"> </td> </tr> </table> </div> <div id="menuPanel" class="x-hide-display"> </div> <div id="pwd-win"> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%String basepath=request.getContextPath();%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1</title> <link rel="stylesheet" type="text/css" href="<%=basepath %>/resources/css/ext-all.css" /> <link rel="stylesheet" href="<%=basepath %>/resources/css/common.css" type="text/css"></link> <link rel="stylesheet" href="<%=basepath %>/resources/css/Ext.ux.UploadDialog.css" type="text/css"></link> <script type="text/javascript" src="<%=basepath %>/resources/js/ext-base.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/ext-all-debug.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/ext-lang-zh_CN.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/windowposition.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/IFrameComponent.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/common.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/gridToExcel.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/myvtype.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/myextplus.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/Ext.ux.UploadDialog.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/Ext.ux.UploadDialog.packed.js"></script> <script type="text/javascript" src="<%=basepath %>/resources/js/common_client.js"></script> <script type="text/javascript" src="<%=basepath %>/charts/FusionCharts.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = '<%=basepath%>/resources/images/default/s.gif'; Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = "side"; </script> </head> </html>
2.menu 数据加载
struts 配置如下:
<struts> <package name="menumanage" namespace="/menumanage" extends="sys-default"> <action name="querymenu_list" class="MenuManageAction" method="queryMenuList"> </action> </package> </struts>
java代码如下:
1.action
public String queryMenuList() throws Exception { Map params_new = exchangeParams(); String str = menuManageService.queryMenuList(params_new);
<pre name="code" class="html"> String encding = "UTF-8"; response.setContentType(CONTENT_TYPE); OutputStream out = response.getOutputStream(); out.write(str.getBytes(encding)); out.flush(); out.close()
return NONE; }
2.service
public String queryMenuList(Map params) throws Exception { String menuStr = ""; List list = null; if (null != params && !params.isEmpty()) { list = menuManageDAO.queryMenuList(params); } return JSONArray.fromObject(list).toString();; }
3.dao
public List queryMenuList(Map params) { List argsList = new ArrayList(); StringBuffer sql = new StringBuffer(); Object args[] = null; int argTypes[] = null; sql.append("SELECT DISTINCT M.MENU_ID ID,NAME TEXT,(CASE M.MENU_FOLDER_FLAG WHEN '2' THEN 'TRUE' ELSE 'FALSE' END ) LEAFTEMP,SORT_NO,HANDLE_REPRESENT "); sql.append(" FROM " + this.tableSchema).append(".F_CONFIG_MENU M WHERE 1=1 "); String userName = String.valueOf(params.get("username")); List menuList = null; if (!StringUtil.isEmpty(userName)) { menuList = userDao.queryMenuListByUserName(userName); } String ss = "'"; for (int i = 0; i < menuList.size(); i++) { Map m = (Map)menuList.get(i); String str = String.valueOf(m.get("MENUID")); if (!StringUtil.isEmpty(str)) ss += str + "','"; } ss = ss.substring(0, ss.length() - 2); if (ss != "") { sql.append(" and M.MENU_ID in (").append(ss).append(") "); } if (StringUtil.isNullOrEmpty(params.get("p_menu_code"))) { sql.append("AND (P_MENU_CODE=(SELECT MENU_ID FROM " + this.tableSchema); sql.append(".F_CONFIG_MENU WHERE P_MENU_CODE IS NULL)) "); } else { sql.append("AND P_MENU_CODE=? "); argsList.add(params.get("p_menu_code")); } sql.append("order by sort_no "); if (argsList.size() > 0) { args = new Object[argsList.size()]; argTypes = new int[argsList.size()]; for (int i = 0; i < argsList.size(); i++) { args[i] = (Object)argsList.get(i); argTypes[i] = Types.BIGINT; } } return jdbcTemplateEx.query(sql.toString(), args, argTypes, new SuyRowMapper(MenuBean.class)); } public List queryMenuListByUserName(String userName) { StringBuffer sb = new StringBuffer(); sb.append(" select m.menu_id menuid,U.* from ") .append(this.tableSchema) .append(".") .append("sys_role_menu_ref m, ") .append(this.tableSchema) .append(".") .append("F_config_user u where m.role_id = u.roleid ") .append(" and u.name= ?"); return this.jdbcTemplateEx.queryForList(sb.toString(), new Object[] {userName}, new int[] {Types.VARCHAR}); }
简单表结构如下:
create table SYS_MENU ( MENU_ID NUMBER(16) not null, NAME VARCHAR2(256), TITLE VARCHAR2(256), P_MENU_CODE VARCHAR2(16), MENU_FOLDER_FLAG VARCHAR2(8), HANDLE_REPRESENT VARCHAR2(256), --PK_SYS_MENU_ID primary key (MENU_ID) ) create table SYS_ROLE_Menu_REF ( ROLE_Menu_REF_ID NUMBER(16) not null, Menu_ID NUMBER(16) not null, ROLE_ID NUMBER(16) not null, ---SYS_ACCOUNT_ROLE_REF_PK primary key (ACCOUNT_ROLE_REF_ID) )
相关推荐
extJs3升级extjs4方案, extJs3升级extjs4需要修改大量代码
extjs界面生成,页面设计,可以用可视化的方式,生成一套extjs系统界面
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
extjs4.0 实现了主页面框架(主框架使用Ext.Viewport,banner使用Ext.panel.Panel,通过toolbar来放置按钮),包括左侧动态菜单实现(采用Ext.tree.Panel)动态从数据库加载数据来显示菜单(后台代码也在了通过json...
ExtJS页面路由,指定了主页面然后实现的viewport切换路由
用extjs写的页面例子,是一个系统,很合适初学者学习
Extjs 之主界面简单布局,适合刚刚接触ext的新手学习,就一个html页面。 现在拿来分享。
ExtJs3 0官方版
ExtJs3实现、简洁的、静态数据模拟的员工管理系统
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
Extjs生成主界面,利用sencha 工具生成
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块,演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法,以及border、column、form、fit、accordion、hbox等常用布局方式;...
随便玩玩的EXTJS3.1的一个页面初学者可以看看, 可以用来学习学习。内容还是很丰富的。随便玩玩的EXTJS3.1的一个页面初学者可以看看, 可以用来学习学习。内容还是很丰富的。
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
用extjs4写的登录页面,希望对你有用,适合初学者
Extjs3.x入门学习指南,还附带一些常用控件属性的详细描述和使用说明
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
spring3+ibaits3+struts2.18+Extjs3整合增删查改
Extjs3X皮肤19种.rarExtjs3X皮肤19种.rarExtjs3X皮肤19种.rar