Ext JS4序列教程之二 ：异步加载accordion和Tree菜单

1、序言

EXT JS4序列教程主要讲解WEB开发中一些常用的组件，例如Tree,Grid,Combobox,form等，EXT JS4的出现为广大程序员带来了福音，我们可以用较少的代码，实现很炫丽的效果，我在很多项目的架构中都使用EXT JS作为核心的WEB框架，配合jQuery框架，大家很容易实现一个用户体验很不错的软件系统（我们称之为高大上，哈哈哈）。EXT JS自推出以来，其性能就饱受开发的砰击，在EXT JS4以前的版本，性能确实不是很好，不过比起jQuery Easy UI，那还是要好很多的，从EXT JS4.2以后的版本开始，性能还是很不错的，代码也比较精简，结构清晰，纯面像对象的语法，BUG也较EXT JS4.1少了很多，相对比较稳定，EXT JS4推出了MVC模式的设计风格，使得代码结构更加清晰，可读性更好，非常类似于使用JAVA SWING和C# WinForm开发，但如果没有接触过AJAX框架的程序员，第一次使用EXT JS4会碰到各种各样的问题，本教程教从零开始讲解EXT JS4,从客户端到服务器都有完整的代码，服务端使用SSH框架，用注解方式进行开发，抛弃了繁锁的配置文件（我本人相当讨厌配置文件，在我设计的架构中，配置文件几乎为零）。关于源码，由于Google无法访问（IT业的一大悲剧），大家可以到优快云上下载。

本文从实际应用出发，讲解与WEB系统开发息息相关的实例，EXT JS功能很丰富，由有时间的原因，我不会所有的功能都讲到（我都是利用业余时间写教程，目前在一家公司担任高级架构师，工作很忙，我写教程主要是在互联网上和大家一起分享自己的开发经验），大家按照本套系列教程来逐步开发代码，可以实现一个功能比较完整的WEB系统。本教程后端使用的架构为Struts2+Hibernate4+Spring4，后续我将会逐一介绍SSH架构的搭建。关于ASP.NET的教程，会在后续推出。

 

 

                                                                                                                                          作者：山人

1、 异步accordion和Tree菜单

    好了，各位观众，前面我们讲了layout布局中的border布局，本章我要介绍一个另大家兴奋的东西，那就是异步accordion和Tree菜单，这类菜单在实际的项目中经常会用到，accordion菜单作为功能模块菜单，Tree菜单作为功能点菜单，由其是规模较大的项目，应用较为普遍。我在网上搜索发现类似的例子有很多，但是很少有异步加载Tree的例子，很多都是一次性加载，这不仅会消耗多余的资源，造成服务端和客户端的查询、显示效率下降，而且不利于权限控制，例如Spring-acegi安全框架。如果是政府类的安全性和保密性要求较高的应用系统，是不适用的，前段时间闹的沸沸扬扬的香港占中事件，国外黑客宣布要入侵中国的电子政务系统，以支持香港占中，这对我国的电子政务系统的安全性提出了挑战，一个很小的漏网都可能会成为黑客入侵的目标，造成较大的损失。所以，菜单的异步加载和权限控制是很有必要的，因为只有异常加载菜单才能较好的与安全框架集成，如果把权限控制放在客户端脚本里，黑客就可以通过修改脚本执行顺序、跨站脚本攻击等技术攻击我们的系统，得到系统管理员的权限。说了这么多题外话，我们先来看一下效果：

     

    怎么样，高大上吧？其实高大上就是这么来的。当然，很多按钮位置错乱、节点错乱、半天不响应的UI也是这么来的，我们称之为“土肥圆”，不知道你有没有见过，反正我是见过，最让人佩服的是，这样的系统还被客户使劲的夸，我们只能彻底拜服在这位项目经理的脚下。由此可知，做好一个系统，不是你的功能做的有多强就可以的，关键还是要维护好客户关系的。以上界面具体实现步骤如下：

 

第一步：老姜一块，我们需要在JSP中引入Ext JS4的类库，这一步是必须的。

  

<%@ page pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%-- 样式文件，加载全部样式 --%>
<link rel="stylesheet" type="text/css" href="<%=path%>/javascript/extjs-4.1.0/resources/css/ext-all.css" />
<%-- ext js 文件 --%>
<script type="text/javascript" src="<%=path%>/javascript/extjs-4.1.0/ext-all.js"></script>
<script type="text/javascript" src="<%=path%>/javascript/extjs-4.1.0/ext-lang-zh_CN.js"></script>

注意，大家可以把EXT JS类库定义在一个JSP中，当其他页面要引用的时候，可以使用JSP的包含动作将类库引入，这样也符合代码重用的目的，同时要把ext-lang-zh_CN.js这个文件引进来，这个是Ext JS的语言文件，用来汉化EXT JS。

 

接下来讲解几个EXT JS的函数，第一个函数EXT的AJAX请求函数，这个函数用来发送异步请求，向服务器请求数据，服务器收到请求后将数据返回给客户端，由EXT JS进行处理，函数如下：

  Ext.Ajax.request({….})

第二个函数，哦，对了，这里我们不能称之为函数，应该称之为模型（Model），在JAVA和C#里，我们经常要定义Model，用来定义和存储对象的数据，EXT JS的模型和各种服务端编程语言是一样的，只是写法不一样，EXT JS的模型用来存储JSON格式的数据，Model存储在store里面，store就像一个数据库，里面可以有表，而Model的角色就是表，定义一个模型是这样的。

Ext.define('Menu', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'id',
				type : 'string'
			}
此处略去N个字

第二步：定义一个MODEL

//定义一个菜单的MODEL，用来保存对应的JSON数据
		Ext.define('Menu', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'id',
				type : 'string'
			}, {
				name : 'text',
				type : 'string'
			}, {
				name : 'url',
				type : 'string'
			} ]
		});

第三步：定义一个TreePanel

/**
	* 生成treepanel
	*/
	var buildTree = function(json) {
		//创建一颗树了
		return Ext.create('Ext.tree.Panel',
		{
			useArrows : true,
			rootVisible : false,
			border : false,
			store : Ext.create('Ext.data.TreeStore', {
			model : 'Menu',
			//使用AJAX动态装载Tree
			proxy: {
					  type: 'ajax',
					  url: ctx+'/queryChildMenu'
				   },
			root : {
					  expanded : true,
					 children : json
				   }
			}),
			listeners : {
			//节点单击事件
			'itemclick' : function(view, record, item,index, e) {
				var id = record.get('id');
				var text = record.get('text');
				var url = record.get('url');
				var leaf = record.get('leaf');
				if (leaf) {
						centerPanel.loadPage(url,'menu' + id, text);
				}
			},
			//单击节点展开之前的事件
			'beforeitemclick':function(view, record, item,index, e)
			{
				return;
			},
			scope : this
			}
		});
	};

第四步：创建AJAX请求，从服务器中获取菜单数据

/**
	* 创建AJAX请求，从服务器请求菜单数据生成 accordion和Tree 菜单
	*/
	Ext.Ajax.request({
	         url : ctx+"/queryMenu",
				success : function(response) {
					var json = Ext.JSON.decode(response.responseText);
					var rows=json["rows"];
					for(var index in rows)
					{
						var panel = Ext.create('Ext.panel.Panel', {
							title : rows[index].text,
							layout : 'fit'
						});
						var menus=rows[index].menus;
						if(menus)
						{
							panel.add(buildTree(menus));
						}
						leftPanel.add(panel);
					}
			},
			failure : function(request) {
				Ext.MessageBox.show( {
					title : '操作提示',
					msg : "连接服务器失败",
					buttons : Ext.MessageBox.OK,
					icon : Ext.MessageBox.ERROR
				});
			},
			method : 'post'
	});

客户端的完整代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="include/Ext4Lib.jsp"></jsp:include>
<title>功能菜单</title>
<script type="text/javascript">
Ext.onReady(function() {
	var ctx="${pageContext.request.contextPath}";
	/**
	*定义右侧面版
	*/
	Ext.define('mainTabPanel', {
		extend: 'Ext.tab.Panel',
		//重写页面加载方法，在该方法中，定义一个iframe，用来装载JSP页面
		loadPage:function(url,id,title,icon,reload){
			var tab = this.getComponent(id);
			debugger;
			if(tab){
				this.setActiveTab(tab);
			}else
			{
				var p = this.add(new Ext.panel.Panel({
					id:id,
					title:title,
					closable:true,
					icon:icon,
					html:'<iframe src="' + url + '"width="100%" height="100%" frameborder="0" scrolling="auto"></iframe>'
				
				}));
				this.setActiveTab(p);
			}
		}
	 });
	
	/**
	*创建顶部面板
	*/
    var topPanel = Ext.create('Ext.panel.Panel', {
                            region : 'north',
                            height : 55
    });
    /**
	*定义顶左侧面板
	*/
    var leftPanel = Ext.create('Ext.panel.Panel', {
                            region : 'west',
                            title : '导航栏',
                            width : 230,
                            layout : 'accordion',
							split:true,
                            collapsible : true//是否可以折叠收缩
     });
    /**
	*创建中间面板
	*/
    var centerPanel = Ext.create('mainTabPanel', {
                            region : 'center',
                            layout : 'fit',
                            tabWidth : 120,
                            items : [{
                                title : '首页'
                            }]
    });
    
	/**
	* 创建AJAX请求，从服务器请求菜单数据生成 accordion和Tree 菜单
	*/
	Ext.Ajax.request({
	         url : ctx+"/queryMenu",
				success : function(response) {
					var json = Ext.JSON.decode(response.responseText);
					var rows=json["rows"];
					for(var index in rows)
					{
						var panel = Ext.create('Ext.panel.Panel', {
							title : rows[index].text,
							layout : 'fit'
						});
						var menus=rows[index].menus;
						if(menus)
						{
                             //为accordion添加树菜单
							panel.add(buildTree(menus));
						}
						leftPanel.add(panel);
					}
			},
			failure : function(request) {
				Ext.MessageBox.show( {
					title : '操作提示',
					msg : "连接服务器失败",
					buttons : Ext.MessageBox.OK,
					icon : Ext.MessageBox.ERROR
				});
			},
			method : 'post'
	});

	 //定义一个菜单的MODEL，用来保存对应的JSON数据
	Ext.define('Menu', {
			extend : 'Ext.data.Model',
			fields : [ {
				name : 'id',
				type : 'string'
			}, {
				name : 'text',
				type : 'string'
			}, {
				name : 'url',
				type : 'string'
			} ]
	});
	
	/**
	* 生成treepanel
	*/
	var buildTree = function(json) {
		//创建一颗树了
		return Ext.create('Ext.tree.Panel',
		{
			useArrows : true,
			rootVisible : false,
			border : false,
			store : Ext.create('Ext.data.TreeStore', {
			model : 'Menu',
			//使用AJAX动态装载Tree
			proxy: {
					  type: 'ajax',
					  url: ctx+'/queryChildMenu'
				   },
			root : {
					  expanded : true,
					 children : json
				   }
			}),
			listeners : {
			//节点单击事件
			'itemclick' : function(view, record, item,index, e) {
				var id = record.get('id');
				var text = record.get('text');
				var url = record.get('url');
				var leaf = record.get('leaf');
				if (leaf) {
						centerPanel.loadPage(url,'menu' + id, text);
				}
			},
			//单击节点展开之前的事件
			'beforeitemclick':function(view, record, item,index, e)
			{
				return;
			},
			scope : this
			}
		});
	};

	/**
	* 创建视图
	*/
	Ext.create('Ext.container.Viewport', {
			layout : 'border',
			renderTo : Ext.getBody(),
			items : [ topPanel, leftPanel, centerPanel ]
		});
	});
</script>
</head>
<body></body>
</html>

第五步：服务端代码

我们在Struts2的Action中添加两个方法，第一个方法用来加载accordion菜单和Tree的根菜单所需的数据

@Action(value="queryMenu",results = { @Result(type = "json",params={"root","pageBean"})})
	public String queryMenu() {
		
		menuPanels=menuPanelService.queryMenuPanel();
		this.pageBean.setRows(menuPanels);
		this.pageBean.setTotal(menuPanels.size());//不使用分页
		return "success";
	}

第二个方法用来查询Tree菜单下的子菜单

/**
	 * 查询子菜单事件
	 * @return
	 */
	@Action(value="queryChildMenu",results = { @Result(type = "json",params={"root","menus"})})
	public String queryChildMenu() {
		
		menus=menuPanelService.queryChildMenu(node);
		return "success";
	}

完整的Action代码

package com.mcs.user.action;

import java.util.List;

import javax.annotation.Resource;

import org.apache.struts2.convention.annotation.Action;
import org.apache.struts2.convention.annotation.Result;

import com.mcs.core.action.BaseAction;
import com.mcs.user.pojo.Menu;
import com.mcs.user.pojo.MenuPanel;
import com.mcs.user.service.MenuPanelService;



public class UserAction extends BaseAction<MenuPanel>{
	
	@Resource
	private MenuPanelService menuPanelService;
	private boolean ignoreHierarchy=false;
	
	private List<MenuPanel> menuPanels;
	private List<Menu> menus;
	
	private String node;
	@Action(value="queryUser",results={@Result(location="main.jsp")})
	public String queryUser(){
		return "success";
	}
	private String userName;
	
	public String getUserName() {
		return userName;
	}
	public void setUserName(String userName) {
		this.userName = userName;//
	}
	@Action(value="queryMenu",results = { @Result(type = "json",params={"root","pageBean"})})
	public String queryMenu() {
		
		menuPanels=menuPanelService.queryMenuPanel();
		this.pageBean.setRows(menuPanels);
		this.pageBean.setTotal(menuPanels.size());//不使用分页
		return "success";
	}
	/**
	 * 查询子菜单事件
	 * @return
	 */
	@Action(value="queryChildMenu",results = { @Result(type = "json",params={"root","menus"})})
	public String queryChildMenu() {
		
		menus=menuPanelService.queryChildMenu(node);
		return "success";
	}
	public List<MenuPanel> getMenuPanels() {
		return menuPanels;
	}

	public void setMenuPanels(List<MenuPanel> menuPanels) {
		this.menuPanels = menuPanels;
	}
	public boolean isIgnoreHierarchy() {
		return ignoreHierarchy;
	}
	public void setIgnoreHierarchy(boolean ignoreHierarchy) {
		this.ignoreHierarchy = ignoreHierarchy;
	}
	
	public String getNode() {
		return node;
	}
	public void setNode(String node) {
		this.node = node;
	}
	public List<Menu> getMenus() {
		return menus;
	}
	public void setMenus(List<Menu> menus) {
		this.menus = menus;
	}
	
	
	
	
}

第五步：编写Server类

public List<MenuPanel> queryMenuPanel()
{
		return menuPanelDao.queryMenuPanel();
}

@Override
public List<Menu> queryChildMenu(String id) {
		// TODO Auto-generated method stub
		return menuPanelDao.queryChildMenu(id);
}

第六步：编写DAO类

/**
	 * 查询MenuPanl，作为accordion菜单和Tree菜单的根节点
	 */
	@Override
	public List<MenuPanel> queryMenuPanel() {
		// TODO Auto-generated method stub
		String hql="from MenuPanel";
		Query query=super.getSession().createQuery(hql);
		return query.list();
	}

	/**
	 * 使用本地查询，查询父节点等于当前节点的菜单
	 */
	@Override
	public List<Menu> queryChildMenu(String id) {
		// TODO Auto-generated method stub
		String hql="select id,text,url,leaf from menu where parentId=?";
		SQLQuery query=super.getSession().createSQLQuery(hql);
		query.setString(0, id);
		List<Menu> nodes=new ArrayList<Menu>();
		List<Object[]> list=query.list();
		for (Object[] object : list) {
			Menu menu=new Menu();
			menu.setId(object[0]==null?null:object[0].toString());
			menu.setText(object[1]==null?null:object[1].toString());
			menu.setUrl(object[2]==null?null:object[2].toString());
			menu.setLeaf(object[3]==null?false:Boolean.parseBoolean(object[3].toString()));
			nodes.add(menu);
		}
		
		return nodes;
	}

第七步：POJO类

package com.mcs.user.pojo;

import java.util.ArrayList;
import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.OneToMany;
import javax.persistence.Table;

import com.mcs.pojo.base.GenericObject;

/**
 * 这个是MenuPanel对应的是accordion菜单
 * @author lishengbo
 *
 */
@Entity
@Table(name = "MENUPANEL")
public class MenuPanel extends GenericObject {
	private String text;
	private List<Menu> menus=new ArrayList<Menu>();

	public MenuPanel() {
	}

	public MenuPanel(String text) {
		this.text = text;
	}
	public MenuPanel(long id,String text) {
		this.text = text;
		super.setId(id+"");
	}

	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	/**
	 * 一对多关联Menu菜单，作为Tree中的根节点，这里使用立即加载和MenuPanel一起加载到客户端，注意，一定要使用立即加载
	 * @return
	 */
	@OneToMany(cascade = {CascadeType.ALL}, fetch = FetchType.EAGER,mappedBy="menuPanel")
	public List<Menu> getMenus() {
		return menus;
	}

	public void setMenus(List<Menu> menus) {
		this.menus = menus;
	}

}


package com.mcs.user.pojo;

import java.util.List;

import javax.persistence.CascadeType;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.FetchType;
import javax.persistence.JoinColumn;
import javax.persistence.ManyToOne;
import javax.persistence.OneToMany;
import javax.persistence.Table;

import com.mcs.pojo.base.GenericObject;


@Entity
@Table(name="MENU")
public class Menu extends GenericObject{
	private String text;
	private String url;
	private boolean leaf=true;//默认是叶子节点
	private MenuPanel menuPanel;
	private List<Menu> children;
	private Menu menu;
	
	
	public Menu() {
	}

	public Menu(String text, String url) {
		super();
		this.text = text;
		this.url = url;
	}
	public Menu(long id,String text, String url,MenuPanel menuPanel) {
		super();
		super.setId(id+"");
		this.text = text;
		this.url = url;
		this.menuPanel=menuPanel;
	}
	public String getText() {
		return text;
	}

	public void setText(String text) {
		this.text = text;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	@ManyToOne(cascade={CascadeType.PERSIST,CascadeType.REMOVE}, targetEntity=MenuPanel.class)
	@JoinColumn(name="menuPanelId",referencedColumnName="id",insertable=true,updatable=true)
	public MenuPanel getMenuPanel() {
		return menuPanel;
	}

	public void setMenuPanel(MenuPanel menuPanel) {
		this.menuPanel = menuPanel;
	}

	@Column(length=1000)
	public boolean isLeaf() {
		return leaf;
	}

	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}

	@OneToMany(cascade=CascadeType.ALL,fetch=FetchType.LAZY,mappedBy="menu")
	public List<Menu> getChildren() {
		return children;
	}

	public void setChildren(List<Menu> children) {
		this.children = children;
	}

	@ManyToOne(cascade={CascadeType.PERSIST,CascadeType.MERGE}, targetEntity=Menu.class)
	@JoinColumn(name="parentId",referencedColumnName="id",insertable=true,updatable=true)
	public Menu getMenu() {
		return menu;
	}

	public void setMenu(Menu menu) {
		this.menu = menu;
	}
	
	
}

第九步：数据库中的数据展示

   Menu表中的数据

MenuPanel表中的数据