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