extjs 怎么让center区域加载 左边树传过来的url 希望能有个例子 谢谢504211127 yoixiang是腾讯的
展开全部
自己修改store中的数据即可！！！
<%@ 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 HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>ext4/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=basePath%>js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext4/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var top = new Ext.Panel({
region : 'north',
title : "标题",
height : 80,
border : true,
html : "LOGO",
margins : '0 0 5 0'
});
var store = Ext.create('Ext.data.TreeStore',{
fields :['id','leaf','text','url'],
root: {
text : "根节点",
expanded: true,
children: [
{
text : "子节点1",
url : "index.jsp",
id : 'zi1',
leaf: true
},
{
text : "子节点2",
url : "index1.jsp",
id : 'zi2',
leaf: true
},
{
text : "子节点3",
url : "index.jsp",
id : 'zi3',
leaf: true
}
]
}
});
var left = Ext.create("Ext.tree.Panel",{
width: 200,
store: store,
region:'west',
rootVisible:true,
title : '左侧树',
listeners: {
'itemclick': function(view, node) {
var url = node.get('url');
var id = node.get('id');//id如果没有定义，则自动生成一个唯
var p;
if (url) {
if (p) {
//如果已经存在，则激活
center.setActiveTab(p);
} else {
//如果不存在，则创建新的并激活
p = new Ext.Panel( {
title : node.get('text'),
autoLoad : {
url : url,
scripts : true
},
closable : true,//标签上出现关闭按钮
id : id
});
center.add(p);
center.setActiveTab(p);
}
}
}
}
});
var center = new Ext.TabPanel({
region : 'center',
defaults: {autoScroll:true},
items : {
id : "opt1",
title : 'Default Tab',
html : '欢迎使用办公管理系统'
},
enableTabScroll : true
});
center.setActiveTab("opt1");
var bottom = new Ext.Panel({
region : 'south',
title : 'Information',
collapsible : true,
html : '版权所有，翻版必究!',
split : true,
height : 100,
minHeight : 100,
bodyStyle : "padding: 10px; font-size: 12px; text-align:center;"
});
var vp = new Ext.Viewport( {
layout : 'border',
items : [ top, left, center, bottom ]
});
})
</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 HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Insert title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="<%=basePath%>ext4/resources/css/ext-all.css" />
<script type="text/javascript"
src="<%=basePath%>js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>ext4/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var top = new Ext.Panel({
region : 'north',
title : "标题",
height : 80,
border : true,
html : "LOGO",
margins : '0 0 5 0'
});
var store = Ext.create('Ext.data.TreeStore',{
fields :['id','leaf','text','url'],
root: {
text : "根节点",
expanded: true,
children: [
{
text : "子节点1",
url : "index.jsp",
id : 'zi1',
leaf: true
},
{
text : "子节点2",
url : "index1.jsp",
id : 'zi2',
leaf: true
},
{
text : "子节点3",
url : "index.jsp",
id : 'zi3',
leaf: true
}
]
}
});
var left = Ext.create("Ext.tree.Panel",{
width: 200,
store: store,
region:'west',
rootVisible:true,
title : '左侧树',
listeners: {
'itemclick': function(view, node) {
var url = node.get('url');
var id = node.get('id');//id如果没有定义，则自动生成一个唯
var p;
if (url) {
if (p) {
//如果已经存在，则激活
center.setActiveTab(p);
} else {
//如果不存在，则创建新的并激活
p = new Ext.Panel( {
title : node.get('text'),
autoLoad : {
url : url,
scripts : true
},
closable : true,//标签上出现关闭按钮
id : id
});
center.add(p);
center.setActiveTab(p);
}
}
}
}
});
var center = new Ext.TabPanel({
region : 'center',
defaults: {autoScroll:true},
items : {
id : "opt1",
title : 'Default Tab',
html : '欢迎使用办公管理系统'
},
enableTabScroll : true
});
center.setActiveTab("opt1");
var bottom = new Ext.Panel({
region : 'south',
title : 'Information',
collapsible : true,
html : '版权所有，翻版必究!',
split : true,
height : 100,
minHeight : 100,
bodyStyle : "padding: 10px; font-size: 12px; text-align:center;"
});
var vp = new Ext.Viewport( {
layout : 'border',
items : [ top, left, center, bottom ]
});
})
</script>
</head>
<body>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
