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业的一大悲剧），大家可以到CSDN上下载。

本文从实际应用出发，讲解与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动态装载Treeproxy: {  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动态装载Treeproxy: {  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>{@Resourceprivate 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();}@Overridepublic List<Menu> queryChildMenu(String id) {// TODO Auto-generated method stubreturn menuPanelDao.queryChildMenu(id);}

第六步：编写DAO类

/** * 查询MenuPanl，作为accordion菜单和Tree菜单的根节点 */@Overridepublic List<MenuPanel> queryMenuPanel() {// TODO Auto-generated method stubString hql="from MenuPanel";Query query=super.getSession().createQuery(hql);return query.list();}/** * 使用本地查询，查询父节点等于当前节点的菜单 */@Overridepublic List<Menu> queryChildMenu(String id) {// TODO Auto-generated method stubString 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表中的数据