`

带右键菜单的extjs树

阅读更多

核心代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	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>项目管理首页</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<link rel="stylesheet" href="extjs2.x/resources/css/ext-all.css" />
		<!-- GC -->
		<!-- LIBS -->
		<script type="text/javascript" src="extjs2.x/adapter/ext/ext-base.js">
        </script>
		<!-- ENDLIBS -->
		<script type="text/javascript" src="extjs2.x/ext-all.js"></script>

	</head>

	<body>
		<script type="text/javascript">
  Ext.onReady(function(){
      //定义树的跟节点
      var root=new Ext.tree.TreeNode({
            id:"root",//根节点id
            text:"我是树根"
      });
    
      //定义树节点
      var c1=new Ext.tree.TreeNode({
        id:'c1',//子结点id
        text:'我是大儿子'
      });
    
      root.appendChild(c1);//为根节点增加子结点c1
          
      //生成树形面板
      var tree=new Ext.tree.TreePanel({
        renderTo:"show",
        root:root,//定位到根节点
        animate:true,//开启动画效果
        enableDD:false,//不允许子节点拖动
        border:false,//没有边框
        rootVisible:true//设为false将隐藏根节点,很多情况下,我们选择隐藏根节点增加美观性
     });
    
     //定义右键菜单
     var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '菜单1',
            //增加菜单点击事件
            handler:function (){
                      alert('我被点击了!');
                    }
        }, {
            id:'rMenu2',
            text : '菜单2'
        }, {
            id:'rMenu3',
            text : '菜单3'
        }]
     });

     //增加右键点击事件
     c1.on('contextmenu',function(node,event){//声明菜单类型
          event.preventDefault();//这行是必须的,谁能解释下,我没搞懂-_-||
          rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单
     });       

  })
 </script>
		<div id="show"></div>
	</body>
</html>

 运行代码。效果见附件

  • 大小: 4.1 KB
分享到:
评论

相关推荐

    复选框的且带右键菜单的树代码

    ### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息,并支持用户进行一系列操作如搜索、添加、删除等。...

    ext带右键菜单的树

    在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能,即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性,使得操作更加直观和便捷。 在ExtJS中,树形...

    ExtJS 自定义树组件 节点的操作 搜索 右键菜单

    功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范,简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.

    ExtJs grid行 右键菜单的两种方法

    在ExtJs中,创建一个Grid并为其添加右键菜单是常见的需求,特别是在开发富客户端应用时。本篇文章将介绍两种实现ExtJs grid行右键菜单的方法。这两种方法都是基于ExtJs框架的功能,允许用户在点击网格行时显示自定义...

    Ext做的例子右键菜单设置forward跳转b/s版

    在这个“Ext做的例子右键菜单设置forward跳转b/s版”中,我们将探讨如何利用ExtJS实现一个右键菜单系统,该系统能够支持页面的forward跳转功能,适用于特定的B/S架构(Browser/Server,即浏览器/服务器模式)的页面...

    ext+ssh树,带右键功能

    【标题】"ext+ssh树,带右键功能"指的是在Web应用开发中,结合EXTJS(EXT)和Struts2(SSH)框架构建的一种特殊交互界面,它包含了一个能够展示层级结构数据的树形组件,并且具备了右键菜单功能。EXTJS是一款强大的...

    ExtJs树例子

    同时,用户可以通过点击、拖拽、右键菜单等方式与树进行交互。例如,可以监听`click`、`expand`、`collapse`等事件来进行相应的操作。 6. **扩展性**:ExtJS的树形控件具有高度的可扩展性,可以通过插件(plugins)...

    Ext 中的Tree实现不同节点不同的右键菜单

    本篇文章将深入探讨如何在`ExtJS`的Tree组件中实现不同节点具有不同的右键菜单功能。 首先,我们需要理解`ExtJS`的`Tree`组件的基本工作原理。`Tree`是通过`TreeNode`对象来表示每一个层级节点的,每个节点都可以有...

    extjs 树的开发文档

    3. **前端交互**:当用户右键点击树的叶子或目录节点时,EXTJS会显示一个菜单,用户可以选择编辑或删除等操作。这些操作会触发DWR调用,将请求发送到后端。 4. **拖拽功能**:EXTJS树支持节点的拖放操作。当用户...

    extjs目录树编辑

    例如,可以监听`itemcontextmenu`事件来显示右键菜单,`beforeedit`事件来在编辑前进行验证,`edit`事件来处理编辑后的操作,以及`beforeremove`事件来确认删除操作。 7. **数据绑定**:EXTJS的树结构通常与后台...

    基于FineUI Grid控件添加右键菜单

    在本文中,我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库,它基于ExtJS库,并提供了丰富的UI组件和便捷的API,使得开发者能够快速构建交互式的企业级Web应用。 ...

    extjs3.0 组件

    EXTJS 提供了简单易用的API来创建和管理右键菜单,可以轻松地将其与任何组件关联,如表格、树形视图等。这为用户提供了更直观的交互方式,提升了应用的易用性。 在EXTJS 3.0 中,网格(Grid)组件也是不可或缺的一...

    dhtmlXtree树 右dhtmlXtree键菜单

    在dhtmlXtree中,右键菜单可以自定义,这样开发者可以根据需求为每个节点或整个树添加不同的菜单项。这使得用户能够更便捷地与树结构进行交互,例如编辑、删除、复制或移动节点,以及执行其他定制操作。 实现...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    11.实现右键菜单的功能,自定义一个按钮 12.文章预览功能、修改文章功能 13.查看文章评审(重写分页组件的部分方法) 14.完善分页组件、查看文章评审后台功能 15.由菜单树操作右边的工作区域、完成管理员管理文章...

    EXTJS动态树的实现举例

    通过扩展Tree Node或Tree Panel,可以自定义节点的行为,例如添加右键菜单、拖放操作等。 通过以上步骤,我们就能在EXTJS中实现一个动态树。具体示例代码可能包括HTML、CSS和JavaScript文件,它们共同构成一个完整...

    extjs ajax tree(js动态树,无需递归)

    例如,可以添加右键菜单、拖放功能、节点展开/折叠事件等。同时,`Ext.data.TreeModel`和`Ext.data.NodeInterface`提供了操作树节点的方法,如`expand()`, `collapse()`, `appendChild()`, `insertBefore()`等。 总...

    ExtRightMenuTree

    ExtRightMenuTree是一个基于ExtJS库的扩展,它专门用于增强树形组件的功能,特别是集成右键菜单。在本文中,我们将深入探讨ExtJS的TreePanel组件,以及如何利用ExtRightMenuTree实现自定义的右键菜单功能,以提供更...

Global site tag (gtag.js) - Google Analytics