ExtJS3 简单主页面构

xue88ming

浏览: 34231 次
来自: 上海

最近访客更多访客>>

aaronuu

firehack

844700118

ln_lz

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java
EXTJS

html 框架 extjs

一. 页面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)
)

分享到：

ext3 简单grid 页面 | 解决Spring定时计划任务重复执行两次（实例 ...

2015-07-23 21:36
浏览 527
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJS3 简单主页面构

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJS3 简单主页面 构

评论

发表评论

相关推荐

有10阶梯, 每次走1,2 or 3 阶,有多少种方式???

Spring jdbc 两方法分析

注释驱动的 Spring cache 缓存介绍

Servlet 注解 不生效

Java 并发编程实战.pdf

Java transient关键字使用小记

每次任务 创建 一个 Scheduler,运行完直接shutdown ,同时运行不相互影响.

java export jar 在Window,liunix 运行

Arrays.asList 分析

解决Spring定时计划任务重复执行两次（实例被构造两次）问题的方法

extjs3 用户管理 页面

Demo POI

java 直接 访问WebSphere JNDI

获得执行jar的运行路径

图片 压缩

split 陷阱分析

ext3 简单grid 页面

JSON 简单封装

Spring jdbc call oralce procedure or function

深入浅出JMS(四)--Spring和ActiveMQ整合的完整实例

最近访客更多访客>>

ExtJS3 简单主页面构

Servlet 注解不生效

每次任务创建一个 Scheduler,运行完直接shutdown ,同时运行不相互影响.

extjs3 用户管理页面

java 直接访问WebSphere JNDI

图片压缩