带右键菜单的extjs树

select*from爱

浏览: 105064 次
性别:
来自: 天府之国

最近访客更多访客>>

u012363178

_幻聽

真的唯一

qinweiping

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

extjs

EXT CSS JavaScript Cache JSP

核心代码

<%@ 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>

运行代码。效果见附件