ExtJS 简单主页面 构建

一. 页面JSP代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<pre name="code" class="html"><%
 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>  

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);
        super.write(response, "X-JSON;charset=UTF-8", str);
        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)
)

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-14 13:58:51

ExtJS 简单主页面 构建的相关文章

更简单的自动化构建

gulp:更简单的自动化构建工具 目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp.为什么使用gulp?因为Gulp更简单.Grunt任务拥有大量的配置,会引用大量你实际上并不需要的对象属性,但是Gulp里同样的任务也许只有几行.有兴趣的同学在学完本文后对比使用Grunt,你就会发现Gulp的代码量是最少的. 安装 需要先安装node.js.这里安装的v5.11.0.使用node -v查看版本号. gulp的安装不是很顺利.按照官方给的安装方法: npm instal

extjs 简单入门

中文网站:http://extjs.org.cn/ 英文网站:http://www.sencha.com/products/extjs/ 1.简介 extJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架. 2.简单使用 需要这些包的支持:ext-all.css,ext-all.js,ext-lang-zh_CN.js 上代码: if (!courseware) { courseware = { }; } courseware.showSchemeSwf = func

extjs简单动画2

var store = Ext.create('Ext.data.Store', { storeId:'employeeStore', fields:['name', 'seniority', 'department'], groupField: 'department', data: {'employees':[ { "name": "Michael Scott", "seniority": 7, "department":

用简单的方法构建一个高可用服务端

一. 什么是高可用性 服务端,顾名思义就是为用户提供服务的.停工时间,就是不能向用户提供服务的时间.高可用,就是系统具有高度可用性,尽量减少停工时间. 停工的原因一般有: 服务器故障.例如服务器宕机,服务器网络出现问题,机房或者机架出现问题等.访问量急剧上升,导致服务器压力过大.导致访问量急剧上升的原因有:时间和访问量都可以预见的,例如秒杀活动,售票系统.时间和访问量都不可以预见的,例如特发性新闻(马航失联的事件)停工的原因,可以理解为灾难,所以系统的高可用性就是容灾,即应对灾难的能力,系统有较

简单神经网络的构建

参考文章: https://www.zybuluo.com/hanbingtao/note/476663 https://www.zybuluo.com/hanbingtao/note/448086 # -*- coding: utf-8 -*- import numpy as np def sigmoid(x):#激活函数 return 1/(1+np.exp(-x)) input1 = np.array([[0.35],[0.9],[0.58],[0.78]]) #输入数据 4x1 w1 =

使用Maven构建一个简单的java工程

原文是我在学习Spring的过程中,在Spring的官网上看到的一个指南:BuildingJava Projects with Maven--http://spring.io/guides/gs/maven/#scratch.我也是刚接触Maven.看到这篇文章觉得非常简单,但又非常实用,尤其是对于像我这样的Maven初学者.基本上看了这篇后能大概知道Maven是个什么东西,干点什么事,并能够上手使用Maven做点小例子.所以忍不住就把它整理成中文,发出来分享一下,帮助初学者.并没有对原文完整翻

构建通过 Database.com 提供技术支持的 PhoneGap 应用程序

要求 其他必要产品 Database.com account 用户级别 全部 必需产品 PhoneGap Build 范例文件 Database.Com-PhoneGap-Sample 在这篇文章中,我们将探究使用 PhoneGap 构建的移动应用程序的创建过程,所有数据 均通过 Database.com 提供并保存.在深入探讨技术细节之前,我们先来回顾一下相关术语. PhoneGap PhoneGap 是一种免费的开放源码技术,旨在使开发人员使用基于 Web 的传统技术,创建能够在多个平台上进

Extjs基础入门视频教程

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)适合人群:初级课时数量:40课时用到技术:Extjs基础,Extjs5新特性,sencha cmd,spring,spring mvc, mybatis涉及项目:信息管理系统核心框架(mvvm+mvc架构)咨询qq:1840215592课程内容简介:1.课程研发环境开发工具:eclipse,sencha cmd:数据库工具:mysql5,mysql workben

Extjs视频教程_Extjs5.0从入门到实战开发信息管理系统

Extjs5.0从入门到实战开发信息管理系统(Extjs基础.Extjs5新特性.Spring.Spring mvc.Mybatis)适合人群:初级课时数量:40课时用到技术:Extjs基础,Extjs5新特性,sencha cmd,spring,spring mvc, mybatis涉及项目:信息管理系统核心框架(mvvm+mvc架构)咨询qq:1840215592课程内容简介:1.课程研发环境开发工具:eclipse,sencha cmd:数据库工具:mysql5,mysql workben