TabPanel子页显示问题
0
[已关闭问题]
需要解决的问题如上图：
页面源码文件如下：
/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){
Ext.QuickTips.init();
//=============================================================
// BorderLayout
//=============================================================
var mytree = new Ext.tree.TreePanel({
el:"tree-div",
autoScroll:true,
autoHeight:true,
animate:true,////展开动画效果
expanded:true,//展开
lines:true,//节点间的虚线条
frame: true,// 美化界面
leaf:false,//是否为叶子节点
rootVisible:false,//是否显示根节点
collapsible:false,//可折叠
containerScroll: true,//否支持滚动条
enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构
enableDrag:true,//树的节点可以拖动Drag
trackMouseOver:false,//false则mouseover无效果
useArrows:true,//小箭头
trackMouseOver:true, //mouseover效果
singleExpand:true,//用单击事件展开,默认为双击
border:false, //边框
useArrows:true
});
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点",
expanded:true
});
//第一个子节点及其子节点
var sub1 = new Ext.tree.TreeNode({
id:"news",
text:"新闻管理",
singleClickExpand:true
});
sub1.appendChild(new Ext.tree.TreeNode({
id:"addNews",
text:"添加新闻",
autoScroll:true,
//href:"http://www.moontalk.com.tw",
//hrefTarget:"mainFrame",
qtip:"月亮说话",//添加鼠标点击上提示效果信息需要添加 Ext.QuickTips.init();
/*
listeners:{//监听
"click":function(node,e){
//alert(node.text) //添加点击后弹出提示框信息
}
}*/
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
'layout': 'fit',
'containerScroll':true,
'autoScroll':true,
'autoShow':true,
'closable':true, //通过html载入目标页
'html':'<iframe scrolling="auto" frameborder="0" leftmargin="0" ' +
'topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%"' +
'src="http://www.moontalk.com.tw" />'
});
}
contentPanel.setActiveTab(n);
}
}
}));
sub1.appendChild(
new Ext.tree.TreeNode({
id:"editNews",
text:"编辑新闻",
autoScroll:true,
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
layout:"fit",
autoShow:true,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="extjs.jsp"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
})
);
sub1.appendChild(new Ext.tree.TreeNode({
id:"delNews",
text:"删除新闻",
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
autoShow:true,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" leftmargin="0" ' +
'topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%"' +
'src="index.jsp" />'
});
}
contentPanel.setActiveTab(n);
}
}
}));
root.appendChild(sub1);
var sub2 = new Ext.tree.TreeNode({
id:"sys",
text:"系统设置",
singleClickExpand:true
});
sub2.appendChild(new Ext.tree.TreeNode({
id:"del2News",
text:"删除新闻",
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
//html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="extjs.jsp"></iframe>'
html:'<iframe scrolling="auto" frameborder="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" src="index.jsp" />'
});
}
contentPanel.setActiveTab(n);
}
}
}));
root.appendChild(sub2);
mytree.setRootNode(root);//设置根节点
mytree.render();//进行显示初始化
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:"center",
border:false, //边框
resizeTabs:false,
deferredRender:false,
tabWidth:60,
autoTabs:true,
maskDisabled:true,//对面板进行遮罩
monitorResize:true,//按照浏览器的大小渲染布局
animCollapse:true,//面板闭合过程附动画效果
autoShow:true,//检测是有否隐藏的样式类
activeTab: 0,
defaults:{autoScroll:true},
items:[{
id:"homePage",
title:"首页",
containerScroll:true,
autoScroll: true,
autoWidth: true,
layout: 'fit',
autoHeight: true,
html:'Tree控件和TabPanel控件结合功能演示!!'
}]
});
var viewport = new Ext.Viewport({
layout: 'border',
border:false, //边框
autoScroll:true,
autoHeight:true,
defaults: {
collapsible: true
},
viewConfig: {
forceFit: true
},
items: [{
title: '标题',
region: 'north',
html: '插入标题LOG',
collapsible:false,
autoHeight:true,
border:true,
margins: '5 5 5 5'
},{
title: '业务菜单',
region: 'west',
id:'west-panel',
width: 250,
minSize: 250,
maxSize: 250,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
items:[mytree],
title:'业务菜单',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'系统设置',
html: '系统菜单',
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
//title: '数据展示',
region: 'center',
margins:'0 5 5 5',
collapsible: false,
layout: 'fit',
items:[{
items:[contentPanel]
}]
}]
});
});
