码迷,mamicode.com
首页 > Web开发 > 详细

ExtJS 简单主页面 构建

时间:2015-07-24 00:00:40      阅读:395      评论:0      收藏:0      [点我收藏+]

标签: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)
)


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

ExtJS 简单主页面 构建

标签:extjs

原文地址:http://blog.csdn.net/xuemingyuan88/article/details/47028997

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!