ExtJS兑现树菜单，支持右击增删改查
日期：2014-05-16 浏览次数：20493 次
ExtJS实现树菜单，支持右击增删改查。
ExtJS树菜单很是强大，参照网上很多文章和说明，自己也写了一个。
我的JS都嵌入再JSP中。
1. JSP页面的的代码如下所示：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>EXtJS异步加载树菜单</title>
<link rel="stylesheet" type="text/css" href="././upload/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="././upload/extjs/ext-base.js"></script>
<script type="text/javascript" src="././upload/extjs/ext-all.js"></script>
<script type="text/javascript" src="././upload/extjs/ext-basex.js"></script>
<script type="text/javascript" src="././upload/extjs/ext-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = '././upload/extjs/resources/images/default/s.gif';// 替换图片文件地址为本地
var treeLoader = new Ext.tree.TreeLoader({
//dataUrl : '././upload/tree/01-04-02.txt'//这里可以不需要指定URL，在加载前事件响应里面设置
});
// 添加一个树形面板
var treepanel = new Ext.tree.TreePanel({
// renderTo:"tree_div",//如果使用renderTo，则不能使用setRootNode()方法，需要在TreePanel中设置root属性。
el : 'tree-panel',// 将树形添加到一个指定的div中,非常重要！
region : 'west',
title : '功能菜单',
width : 200,
minSize : 180,
maxSize : 250,
split : true,
autoHeight : false,
frame : true,// 美化界面
autoScroll : true, // 自动滚动
enableDD : true,// 是否支持拖拽效果
containerScroll : true,// 是否支持滚动条
rootVisible : true, // 是否隐藏根节点,很多情况下，我们选择隐藏根节点增加美观性
border : true, // 边框
animate : true, // 动画效果
loader : treeLoader
});
// 异步加载根节点
var rootnode = new Ext.tree.AsyncTreeNode({
id : '0',
text : '异步加载树根节点',
draggable : false,// 根节点不容许拖动
expanded : true
});
// 为tree设置根节点
treepanel.setRootNode(rootnode);
// 响应加载前事件，传递node参数
treepanel.on('beforeload', function(node) {
treepanel.loader.dataUrl = '././menu_jsonTreeNode.action?parentId='+node.id; // 定义子节点的Loader
});
// 渲染树形
treepanel.render();
// 展开节点,第一个参数表示是否级联展开子节点
rootnode.expand(true);
//设置树的点击事件，对数的叶子添加事件
function treeClick(node, e) {
if (node.isLeaf()) {
//alert(node.id);
e.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) {
var n = contentPanel.add({
'id' : node.id,
'title' : node.text,
closable : true,
autoLoad : {
url : '', //载入页面的办法
scripts : true
} // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
}
// 增加鼠标单击事件
treepanel.on('click', treeClick);
/*
这里主要是对菜单的右键时间操作的响应分成两部分：1、对叶子节点的操作 2、对父节点的操作
*/
//=================================鼠标右键事件开始=====================
// 增加右键点击事件
treepanel.on('contextmenu', function(node, event) {// 声明菜单类型
// 添加一个节点（叶子）
if(node.isLeaf()) {
var chlidNodeClickMenu = new Ext.menu.Menu({
items : [
{
text : '新增文件夹',
iconCls : 'leaf',
// 增加菜单点击事件
handler : function() {
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
