欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

ExtJS3 简单主页面 构

程序员文章站 2022-03-27 07:56:23
...

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


 


 


					

															

						相关标签：												
							html						
												
							框架						
												
							extjs						
											

															

						

							上一篇：							
								如何判断HBase Major Compact是否执行完毕							
						

						

							下一篇：							
								2020纯电动汽车排名：日产聆风上榜，雷诺Zoe第八							
						

					

															

						

							推荐阅读