<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>国宝维稳</title>
<link rel="stylesheet" type="text/css" href="/gbwws/js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="/gbwws/js/ext/ext-base.js"></script>
<script type="text/javascript" src="/gbwws/js/ext/ext-all.js"></script>
<script type="text/javascript" src="/gbwws/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
window.onload = function() {
//左边功能树
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'国宝维稳功能菜单',
width:180,
minSize:150,
maxSize:200,
split:true,
loader: new Ext.tree.TreeLoader({dataUrl:'/gbwws/tree_roots.action'}),
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root:new Ext.tree.AsyncTreeNode({
id:'root',
text:'国宝维稳功能菜单',
draggable:false,
expanded:true
})
});
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">首页显示</div>'
}]
});
//beforeload
menuTree.on('click', function(node,event) {
if(node == menuTree.root) {
return;
}
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
//获取URL
$.ajax({
type: "POST",
url: "/gbwws/tree_urlById.action",
data: "id="+node.id,
success: function(url){
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="' + url + '"></iframe>'
});
contentPanel.setActiveTab(n);
},
error:function() {
Ext.Msg.alert('提示','访问服务器出错了');
}
});
}
contentPanel.setActiveTab(n);
});
menuTree.on('beforeload', function(node) {
if(node == menuTree.root) return true;
if(!node.isLeaf()) {
menuTree.loader.dataUrl = "/gbwws/tree_append.action?id="+node.id;
}
return true;
});
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
//==============================右键菜单=============================================
function rightMenu() {
var currentNode;
var rightMenu = new Ext.menu.Menu({
items : ['-',{
id:'addFoder',
text : '增加目录',
handler:function (){
//处理逻辑
if(currentNode == menuTree.root) {
addFoder(0,currentNode.text);
return;
}
addFoder(currentNode.id,currentNode.text);
}
}, '-',
{
id:'addLeaf',
text : '增加节点',
handler:function (){
//处理逻辑
if(currentNode == menuTree.root) {
addFoder(0,currentNode.text);
return;
}
addFoder(currentNode.id,currentNode.text);
}
}, '-',
{
id:'update',
text : '修改',
handler:function (){
//处理逻辑
if(currentNode == menuTree.root) {
Ext.Msg.alert('提示','不允许修改根节点');
return;
}
//获取URL
$.ajax({
type: "POST",
url: "/gbwws/tree_urlById.action",
data: "id="+currentNode.id,
success: function(url){
update(currentNode.id,currentNode.text,url);
},
error:function() {
Ext.Msg.alert('提示','访问服务器出错了');
}
});
}
},'-',{
id:'del',
text:'删除',
handler:function() {
delete_(currentNode.id);
}
},
'-']
});
//=================================右键事件=====================
menuTree.on('contextmenu', function(n,e) {
currentNode = n;
if(n==menuTree.root) {
Ext.getCmp('del').hide();
Ext.getCmp('addFoder').show();
Ext.getCmp('addLeaf').show();
Ext.getCmp('update').show();
}else {
if(n.isLeaf()) {
Ext.getCmp('del').show();
Ext.getCmp('update').show();
Ext.getCmp('addFoder').hide();
Ext.getCmp('addLeaf').hide();
}
if(!n.isLeaf()) {
Ext.getCmp('del').show();
Ext.getCmp('update').show();
Ext.getCmp('addFoder').show();
Ext.getCmp('addLeaf').show();
}
}
e.preventDefault();//禁用浏览器默认的菜单 必须写
rightMenu.showAt(e.getXY());//取得鼠标点击坐标，展示菜单
});
}
rightMenu();
//=====================创建一个窗口==============================================
var windowCrud = new Ext.Window({modal:true,
isAdd:true,
zid:'',
autoDestroy:false,
width:400,
height:200,
constrain:true,
closeAction:'hide',
buttons :[
{text:'提交',handler:function(){
alert(windowCrud.isAdd == true ? '增加' : '更新');
alert(Ext.getCmp("tree_name").getValue())
alert(Ext.getCmp("tree_url").getValue())
alert(windowCrud.zid);
}
},
{text:'关闭',handler:function(){windowCrud.hide()}}
]
});
function addFoder(id,title) {
windowCrud.zid = id;
windowCrud.setTitle('在' + title+'目下下增加');
windowCrud.removeAll(true);
windowCrud.add(new Ext.form.Label({text:"名字："}));
windowCrud.add(new Ext.form.TextField({id:"tree_name",width:350}));
windowCrud.add(new Ext.form.Label({html:"<br />"}));
windowCrud.add(new Ext.form.Label({text:"URL："}));
windowCrud.add(new Ext.form.TextField({id:"tree_url",width:350}));
windowCrud.show();
}
function update(id,title,url) {
windowCrud.zid = id;
windowCrud.isAdd =false;
windowCrud.setTitle('修改的目录是：' + title);
windowCrud.removeAll(true);
windowCrud.add(new Ext.form.Label({text:"名字："}));
windowCrud.add(new Ext.form.TextField({id:"tree_name",value:title,width:350}));
windowCrud.add(new Ext.form.Label({html:"<br />"}));
windowCrud.add(new Ext.form.Label({text:"URL："}));
windowCrud.add(new Ext.form.TextField({id:"tree_url",value:url,width:350}));
windowCrud.show();
}
function delete_(id) {
Ext.Msg.show({
title:'删除?',
msg: '你确定要删除么?',
buttons: {ok:'确定',cancel:'关闭'},
icon: Ext.Msg.QUESTION,
fn:function(btn,name) {
if(btn == 'ok') {
alert("好");
}
}
});
}
};
</script>
</head>
<body>
</body>
</html>
分享到：
相关推荐
在这个“Ext做的例子右键菜单设置forward跳转b/s版”中，我们将探讨如何利用ExtJS实现一个右键菜单系统，该系统能够支持页面的forward跳转功能，适用于特定的B/S架构（Browser/Server，即浏览器/服务器模式）的页面...
然而，有时我们可能希望在`iframe`内禁用默认的右键菜单，以防止用户通过右键点击执行某些操作，比如复制、查看源代码等。标题"iframe里无右键菜单"正是针对这一需求，描述中提到的解决方案是创建一个既简单又实用的...
在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能，即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性，使得操作更加直观和便捷。 在ExtJS中，树形...
右键菜单的资料，代码已经详细描写。请仿照文件中所描述即可使用，不限于EXT4.0以上版本使用。
### 复选框的且带右键菜单的树代码知识点解析 #### 一、概述 本文档介绍了一段实现带有复选框功能以及右键菜单的树形结构代码。该树形结构主要用于展示联系人信息，并支持用户进行一系列操作如搜索、添加、删除等。...
本篇将深入探讨如何在`Ext JS`中实现Tree组件的不同节点拥有不同的右键菜单，这对于提供定制化的用户体验是非常有用的。 `Ext JS`的Tree组件是一个可扩展的树形结构，用于展示层级数据。在默认情况下，Tree的所有...
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范，简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
例如，添加节点可以监听`contextmenu`事件，然后在右键菜单上添加“添加”选项： ```javascript treeView.on('itemcontextmenu', function(view, record, item, index, event) { event.preventDefault(); var ...
【标题】"ext+ssh树，带右键功能"指的是在Web应用开发中，结合EXTJS（EXT）和Struts2（SSH）框架构建的一种特殊交互界面，它包含了一个能够展示层级结构数据的树形组件，并且具备了右键菜单功能。EXTJS是一款强大的...
简单易懂的ext.tree.panel 树形菜单绑定右击事件
而第三方工具如ShellMenuView、Context Menu Editor等则提供了图形化的界面，让非编程用户也能轻松地添加、删除和管理右键菜单项。 在实例029中，可能包含了一个演示程序或者代码示例，展示了如何创建和管理右键...
在本文中，我们将深入探讨如何在Ext Grid中添加右键菜单功能，这是一项常见的交互设计，可以为用户提供更丰富的操作选项。首先，我们先来理解一下`Ext Grid`是什么。`Ext Grid`是Ext JS库中的一个组件，用于展示结构...
例如，Bootstrap的表格（Bootstrap table）默认并不支持右键菜单功能。在这种情况下，开发者通常需要借助第三方插件来扩展其功能。本文将详细介绍如何使用`contextMenu`插件实现在Bootstrap table上添加右键弹出菜单...
【标题】"ext-tree.rar_ext...综上所述，这个压缩包提供了一个使用Ext JS创建具有右键菜单功能的树形视图的实例，该视图可以直接操作数据库，对于学习和理解如何在Web应用中集成交互式树形组件和数据库操作非常有价值。
`IContextMenu`接口则允许你定义右键菜单中的命令，包括显示的文本、图标以及执行的函数。 2. **注册表脚本**：为了使Shell扩展生效，必须将其注册到系统的注册表中。这通常通过编写注册表脚本完成，将COM组件的...
plugins: new Ext.grid.ContextMenu({ menu: menu }) // 使用插件设置右键菜单 }, listeners: { rowcontextmenu: function(grid, record, tr, index, e) { e.preventDefault(); // 阻止浏览器默认的右键菜单 ...
本例子采用ext3.0+java开发的树结构，完全的动态管理，树结构一旦形成，支持右键菜单，进行增删改，增加，就在树当前节点下创建一个新的节点，利用ajax同步到数据库，总之类似于资源管理器的增删改，由于本人是初学...
在本文中，我们将深入探讨如何在FineUI框架中为Grid控件添加右键菜单功能。FineUI是一款强大的Web前端开发库，它基于ExtJS库，并提供了丰富的UI组件和便捷的API，使得开发者能够快速构建交互式的企业级Web应用。 ...
撇开业务不说，单纯从技术层面来说，要想使用最少操作达到上述效果，博主想到了右键功能，如果能够在第2行或者第3行上面点击鼠标右键，通过右键菜单功能将选中的行移动到相应的位置，这样是不是最简单呢。...