使用EXT实现面板之间的交互功能
前段时间为一个朋友做了一个面板之间的交互的功能，我查看了一些技术资料，用Ext2.3实现的，此程序主要用于学习和交流之用，如果涉及到版权的问题，请及时联系我。
例子的功能：west部分展示的是功能模块树，根节点为功能模块 ，它的两个子节点：系统管理和统计报表 ，系统管理有三个子节点：模块管理、角色管理和工号管理。统计报表有2个子节点：员工年收入统计和地区销售额统计。点击功能模块、系统管理和统计报表均不为在center部分打开新的面板，只有点击模块管理、角色管理、工号管理、员工年收入统计和地区销售额统计才会在右边打开新的面板，并在打开新的面板中显示与链接相关的关键信息。
实现的效果图：001.jpg
所使用到的技术：struts2 + JSON + Ext(2.3.0)，顺便使用到了Spring。
部分代码的展示：
Strust2的配置文件的部分代码：
<package name="menu" namespace="/menu" extends="struts-default">
<action name="do_*" method="{1}" class="menuAction">
</action>
</package>
MenuAction的代码：
package com.demo.menu.action;
import java.util.ArrayList;
import java.util.List;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import com.demo.app.entity.Menu;
import com.demo.common.action.BaseAction;
@SuppressWarnings("serial")
@Scope("prototype")
@Controller("menuAction")
public class MenuAction extends BaseAction {
private List<Menu> menus;
public void getMenus() {
menus = new ArrayList<Menu>();
Menu system = new Menu();
system.setText("系统管理");
system.setCls("folder");
system.setLeaf(false);
system.setId(10); //这里没有设置系统管理的链接值哦!
menus.add(system);
List<Menu> list = new ArrayList<Menu>();
system.setChildren(list);
Menu menu = new Menu();
menu.setText("模块管理");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(11);
menu.setHref("module/do_getList.action");
list.add(menu);
menu = new Menu();
menu.setText("角色管理");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(12);
menu.setHref("role/do_getList.action");
list.add(menu);
menu = new Menu();
menu.setText("工号管理");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(13);
menu.setHref("opertor/do_getList.action");
list.add(menu);
Menu statis = new Menu();
statis.setText("统计报表");
statis.setCls("folder");
statis.setLeaf(false);
statis.setId(20); //这里没有设置统计报表的链接值哦!
menus.add(statis);
list = new ArrayList<Menu>();
statis.setChildren(list);
menu = new Menu();
menu.setText("员工年收入统计");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(21);
menu.setHref("statis/do_statOne.action");
list.add(menu);
menu = new Menu();
menu.setText("地区营业额统计");
menu.setCls("file");
menu.setLeaf(true);
menu.setId(22);
menu.setHref("statis/do_statTwo.action");
list.add(menu);
outJsonArray(menus);
}
}
BaseAction的所用到的部分方法：
public void outJsonArray(Object array) {
JSONArray jsonObject = JSONArray.fromObject(array);
String jsonStr = "";
try {
jsonStr = jsonObject.toString();
} catch (Exception e) {
jsonStr = null;
}
outJsonString(jsonStr);
}
public void outJsonString(String str) {
getResponse().setContentType("text/javascript;charset=UTF-8");
outString(str);
}
public void outString(String str) {
try {
PrintWriter out = getResponse().getWriter();
out.write(str);
} catch (IOException e) {
}
}
以上的代码比较简单，结合例子的功能，看懂应该没有问题。我没有把数据库设计和实现部分的代码写出，也没有给出Menu代码(不过我相信有点基础的人都知道Menu就是一个简单的JavaBean)，而是在action中直接生成所需要的数据，起到一个简单模拟的作用。如果觉得有问题，还是回家好好看看java的基础知识吧。
Java部分都讲完了，下面开始结合代码讲解jsp和extjs的使用。
在系统中extjs文件的位置，详见002.jpg
我把jsp和js都放在WebRoot/pages/panel，详见右上图的tmenu01.jsp和tmenu01.js，详细代码如下：
tmenu01.JSP的部分代码：
<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":"
+ request.getServerPort() + path + "/";
%>
<link rel="stylesheet" type="text/css" href="<%=basePath%>extjs/css/ext-all.css" />
<script type="text/javascript" src="<%=basePath%>extjs/js/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>extjs/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '<%=basePath%>/extjs/images/default/s.gif';
//如果不设置的话，west的树形结构有图片找不到
</script>
<script type="text/javascript" src="<%=basePath%>pages/panel/tmenu01.js"></script>
tmenu01.js的全部代码：
var WebApp = {};
WebApp.Desktop = function(){
WestMenu = new Ext.tree.TreePanel({
region : 'west',
margins: '0 5 0 0',
width : 200,
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Ext.tree.TreeLoader({
dataUrl:'menu/do_getMenus.action'
})
});
var root = new Ext.tree.AsyncTreeNode({
text: '功能模块',
draggable:false,
id:'source'
});
WestMenu.setRootNode(root);
root.expand();
WestMenu.on('click', function(node, e){//设置API树节点的点击监听器 ,这是自己添加的功能
alert("isLeaf="+node.isLeaf()+";text="+node.attributes.text+";node.id="+node.id);
if(node.isLeaf()){//如果是子节点，则进行相应的处理
e.stopEvent();
MainPanel.loadClass(node.attributes.href, node.id,node.attributes.text);
//调用了MainPanel的loadClass的方法(3个参数)
}
});
MainPanel = new Ext.TabPanel({
region : 'center',
activeTab: 0,
items: [{
title : '信息区',
frame : true
}]
});
MainPanel.loadClass = function(href, id, text){
// 给MainPanel添加loadClass的方法(3个参数) ,这是自己添加的功能
var id = id;
var tab = this.getComponent(id);
//根据ID得到一个Component,如果没有对应的Component,
//即tab的值为undefined,说明是第一次被打开.
if(tab){
this.setActiveTab(tab);
}else{
var autoLoad = {url: href};
var p = this.add(new Ext.Panel({
closable: true,
autoScroll:true,
id: id,//id: 'test_panel',//docs-String
cclass : id,//String
title:text+"面板("+id+")",
html:'<h1>面板主区域</h1><br/>'+text+"的URL是"+href,
tbar:[{text:'顶部工具栏topToolbar'}],
bbar:[{text:'底部工具栏bottomToolbar'}],
//autoLoad: autoLoad,//一个对象{url: href}
iconCls: 'icon-cls'
}));
this.setActiveTab(p);
}
};
WebApp.Desktop.superclass.constructor.call(this, {
layout : "border",
items : [ WestMenu, MainPanel]
});
}
Ext.extend(WebApp.Desktop, Ext.Viewport);
//这是EXTJS典型的继承方式，让WebApp.Desktop继承Ext.Viewport