Ext3 动态树 右键菜单
来源：互联网 发布：linux 内核 编辑：程序博客网 时间：2024/06/03 23:41
<%@ 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> 以下是根据第一个做的第二个
<%@ 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 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> <script type="text/javascript" src="../resources/js/ext-base.js"></script><script type="text/javascript" src="../resources/js/ext-all.js"></script><script type="text/javascript" src="../resources/js/jquery.min.js"></script><!-- <script type="text/javascript" src="../resources/js/ext-lang-zh_CN.js"></script><script type="text/javascript" src="../resources/js/ext-config.js"></script> --><link href="../resources/ext-css/css/ext-all.css" type="text/css" rel="stylesheet" /> <script type="text/javascript">var basePath = '<%=basePath%>';var helpPath = basePath + 'manager/help.html'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:basePath + 'menuTree?rootId=0'}),autoScroll:true,autoHeight:false,collapsible:true,rootVisable:false, //不显示根节点root:new Ext.tree.AsyncTreeNode({id:'0',text:'我的菜单',draggable:false,expanded:true}) }); //右边具体功能面板区var contentPanel = new Ext.TabPanel({region:'center',enableTabScroll:true,activeTab:0,items:[{id:'homePage',title:'首页',autoScroll:true,html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+helpPath+ '" ></iframe>'}]});//beforeload menuTree.on('click', function(node,event) { if(node == menuTree.root) { ////console.log("node == menuTree.root"); return; } event.stopEvent(); var n = contentPanel.getComponent(node.id); if (!n) { ////判断是否已经打开该面板////console.log(node.id);////console.log(node.text);//////console.log(node.url);//console.log(basePath + "menuTree!show?id=" + node.id);var url = basePath + "menuTree!show?id=" + node.id;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); } contentPanel.setActiveTab(n); }); menuTree.on('beforeload', function(node) { // if(node == menuTree.root) return true; if(!node.isLeaf()) { menuTree.loader.dataUrl = basePath + 'menuTree?rootId='+node.id; //console.log(basePath + 'menuTree?rootId='+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 (){//处理逻辑 //console.log(currentNode.id);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;}modify(currentNode.id); *///console.log(currentNode.id);currentNode.reload(); } },'-',{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').hide(); 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(){this.ownerCt.findByType('form')[0].getForm().reset();}},{text:'关闭',handler:function(){windowCrud.hide()}}] }); */var windowCrud = new Ext.Window({modal:true,zid:'0',autoDestroy:false,width:300,height:350,constrain:true,closeAction:'hide',items:[{ id:'form-id',xtype:'form',defaultType:'textfield',bodyStyle : 'padding:5px',baseCls : 'x-plaints',items:[{xtype:'panel',layout:'table',fieldLabel:'是否有子节点',defaultType:'radio',baseCls : 'x-plaints',items:[{name:'menu.menuHasChilden',boxLabel:'是', inputValue:1},{name:'menu.menuHasChilden',boxLabel:'否', inputValue:0, checked:true}]},{id:'menuTitle',name:'menu.menuTitle',fieldLabel:'菜单标题',allowBlank:false,emptyText:'输入标题不能为空'},{id:'menuUrl',name:'menu.menuUrl',fieldLabel:'url',vtype:'url'},{id:'menu.menuOrder',name:'menu.menuOrder',fieldLabel:'排序号',allowBlank:false,regex:/^[0-9]+$/,emptyText:'只能输入整数不允许为空'},{xtype:'combo',name:'menu.menuChildenType',typeAhead : true , fieldLabel:'子菜单类型',triggerAction:'all',mode : 'local' , store : new Ext.data.SimpleStore({data : [['0','0'] ,['1','1'],['2','2'],['3','3']],fields : ['1' , '2']}),valueField : '1' ,displayField : '2'},{id:"menu.menuContentWidth",name:"menu.menuContentWidth",fieldLabel:'宽度',regex:/^[01]{1,1}$/},{id:"menu.menuContentHeight",name:"menu.menuContentHeight",fieldLabel:'高度',regex:/^[01]{1,1}$/},{xtype:'panel',layout:'table',fieldLabel:'是否有设置',defaultType:'radio',baseCls : 'x-plaints',items:[{name:'menu.menuIsSetable',boxLabel:'是', inputValue:1},{name:'menu.menuIsSetable',boxLabel:'否', inputValue:0, checked:true}]},{xtype:'panel',layout:'table',fieldLabel:'是否有弹出框',defaultType:'radio',baseCls : 'x-plaints',items:[{name:'menu.menuIsPop',boxLabel:'是', inputValue:1},{name:'menu.menuIsPop',boxLabel:'否', inputValue:0, checked:true}]}]}],buttons :[{text:'提交',handler:function(){if(Ext.getCmp('form-id').getForm().isValid()){//Ext.Msg.alert('info',Ext.getCmp('form-id').getForm().getValues(true));/* var url = basePath + "/menuTree!save?menu.menuParentId=" + windowCrud.zid + "&" + Ext.getCmp('form-id').getForm().getValues(true); */ var url = basePath + "/menuTree!save"; var param = Ext.getCmp('form-id').getForm().getValues(true)+"&menu.menuParentId=" + windowCrud.zid;//console.log(url);ajax_post(url,param, function(data){if(data.status){//Ext.Msg.alert('提示', '成功');windowCrud.hide();if(windowCrud.zid == '0') {menuTree.root.reload();}else{menuTree.getNodeById(windowCrud.zid).reload();}//menuTree.getLoader.load(node, function(){});}else{Ext.Msg.alert('提示', '删除失败请联系管理员！');}},function(){Ext.Msg.alert('提示', '删除失败请联系管理员！');});}else{Ext.Msg.alert('错误', '请输入正确的值');}}},{text:'重置', handler:function(){Ext.getCmp('form-id').getForm().reset();}},{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.zid = id;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 modify(id) {}function delete_(id) { Ext.Msg.show({ title:'删除', msg: '你确定要删除么?', buttons: {ok:'确定',cancel:'关闭'}, icon: Ext.Msg.QUESTION, fn:function(btn,name) { if(btn == 'ok') { var path = basePath + 'menuTree!del?id=' + id; ajax(path, function(jsonData){ if(jsonData.status){ //Ext.Msg.alert('提示', '成功'); //alert(menuTree.getNodeById(id).parentNode.text); menuTree.getNodeById(id).parentNode.reload(); //menuTree.getLoader.load(node); }else{ Ext.Msg.alert('提示', '删除失败请联系管理员！'); } },function(){Ext.Msg.alert('提示', '删除失败请联系管理员！');}); } } });}};function ajax(url_, success_h, faild_h){Ext.Ajax.request({ url: url_, success: function(response){ var urlObj =eval('(' + response.responseText + ')'); success_h(urlObj); }, failure: faild_h });}function ajax_post(url_,param, success_h, faild_h){Ext.Ajax.request({ url: url_, method:'post', params:param, success: function(response){ var urlObj =eval('(' + response.responseText + ')'); success_h(urlObj); }, failure: faild_h });}</script></head><body></body></html> - Ext3 动态树 右键菜单
- Ext3 动态加载树菜单
- Ext3 动态加载Accordion布局面板和树菜单
- dtree动态树+Javascript右键菜单
- dtree动态树+Javascript右键菜单
- 动态弹出右键菜单
- C#动态创建右键菜单
- DataGridView右键菜单动态更改
- MFC动态创建右键菜单
- 动态生成右键菜单子菜单
- 动态添加菜单／菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 如何动态添加菜单/菜单项、子菜单、右键菜单
- 解读uCos中优先级判定表OSUnMapTbl原理
- Linux上iptables防火墙的基本应用教程
- ARM嵌入式Linux系统开发从入门到精通
- HIVE中map，array和structs使用
- 链式栈的实现（ANSI C）
- Ext3 动态树 右键菜单
- zz : Linux中对中断的支持
- Android电话
- 链表插入排序
- 深入浅出之正则表达式（一）
- 注解学习笔记代码
- 如何启动oracle的多个实例
- 如何获得本机的一些设置?(比如语言, 区域格式等)
- java内部类
