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