刚开始学习使用extjs,在部门开发一个自己用的小系统,系统主界面main.aspx左边一个TreePanel用来显示菜单,右边一个TabPanel显示主要内容,想达到点击一个菜单后,右边就自动新建一个新的TabPanel显示相关内容。但是我的程序点击菜单后,虽然一开始显示一个TabPanel,但是马上从main.aspx页面就转到菜单URL所指定的页面上,原来的TreePanel和TabPanel全没有了,不知道为啥?还请各位高手帮忙解决一下,着急。谢谢!
代码如下:
// 左边的菜单
var menu = new Ext.tree.TreePanel({
title: '功能菜单',
region: "west",
autoScroll: true,
enableTabScroll: true,
collapsible: true,
//collapsed: true,//菜单初始化时自动隐藏
iconCls: 'plugin',
split: true,
rootVisible: false,
lines: true,//节点间的虚线条
width: 220,
minSize: 220,
maxSize: 220,
loader: new Ext.tree.TreeLoader({
dataUrl: 'GetMenuTree.ashx'
}),
root: new Ext.tree.AsyncTreeNode({
id: '0', // 注意这个0是约定
level: '0',
expanded: true,
text: '功能菜单',
leaf: false
})
});
menu.on('click', function (node) {
if (node.leaf == true) {
var tab = tabMain.getComponent('tab_' + node.id);
if (!tab) {
tab = new Ext.Panel({
id: 'tab_' + node.id,
closable: true,
title: node.text,
iconCls: node.attributes.iconCls,
autoScroll: true,
border: false,
layout: 'fit',
autoLoad: {
url: node.attributes.url,
scope: this,
method: 'get', //post or get
params: { subMainId: node.id }, //传值
scripts: true, //支持页面所有的dom元素
text: '页面加载中,请稍候....'
}
})
tabMain.add(tab);
}
tabMain.setActiveTab(tab);
}
});
//加载时自动展开根节点
menu.expandAll();
// 主显示区
var tabMain = new Ext.TabPanel({
id: "Main_MasterPage_TabMain",
region: "center",
autoScroll: true,
enableTabScroll: true,//如果Tab过多会出现滚动条
activeTab: 0,
initEvents: function () {
Ext.TabPanel.superclass.initEvents.call(this);
this.mon(this.strip, {
scope: this,
mousedown: this.onStripMouseDown,
contextmenu: this.onStripContextMenu
});
if (this.enableTabScroll) {
this.mon(this.strip, 'mousewheel', this.onWheel, this);
}
this.mon(this.strip, 'dblclick', this.onTitleDbClick, this);
},
onTitleDbClick: function (e, target, o) {
var t = this.findTargets(e);
if (t.item) {
if (t.item.closable) {
if (t.item.fireEvent('beforeclose', t.item) !== false) {
t.item.fireEvent('close', t.item);
this.remove(t.item);
}
}
}
},
items: [new Ext.Panel({
id: 'tab-0001',
title: '首页',
autoScroll: true,
layout: 'fit',
border: false,
iconCls: 'house',
autoLoad: {
url: 'main.aspx',
scope: this,
scripts: true,
text: '页面加载中,请稍候....'
}
})]
});
// 创建框架
new Ext.Viewport({
id: "Main_MasterPage_ViewPort",
layout: 'border',
items: [tabMain, menu]
});
width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" id="aswift_1" name="aswift_1" style="box-sizing: content-box; left: 0px; position: absolute; top: 0px;">
-
id="iframeu1636200_0" src="http://pos.baidu.com/mcdm?rdid=1636200&dc=2&di=u1636200&dri=0&dis=0&dai=2&ps=3454x388&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468804171195&ti=EXTJS%E4%B8%ADTreePanel%E5%92%8CTabPanel%E9%85%8D%E5%90%88%E4%BD%BF%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98-CSDN%E8%AE%BA%E5%9D%9B-CSDN.NET-%E4%B8%AD%E5%9B%BD%E6%9C%80%E5%A4%A7%E7%9A%84IT%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA&ari=2&dbv=2&drs=3&pcs=1354x815&pss=1354x7619&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468804171&rw=815<u=http%3A%2F%2Fbbs.csdn.net%2Ftopics%2F350056033<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DSieD8j_piwnXESIUb2NBDAx3UYDd9Vvd2jCODN3eMMxVpZu4-v995SUgFvMFvGIP%26wd%3D%26eqid%3Dcc09fa2e001f649100000005578c2b7c&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468804171&qn=32eed467094de0fa&tt=1468804171176.23.371.372" width="200" height="22" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: content-box; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">
-
id="iframeu1636201_0" src="http://pos.baidu.com/mcdm?rdid=1636201&dc=2&di=u1636201&dri=0&dis=0&dai=3&ps=3454x642&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468804171195&ti=EXTJS%E4%B8%ADTreePanel%E5%92%8CTabPanel%E9%85%8D%E5%90%88%E4%BD%BF%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98-CSDN%E8%AE%BA%E5%9D%9B-CSDN.NET-%E4%B8%AD%E5%9B%BD%E6%9C%80%E5%A4%A7%E7%9A%84IT%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA&ari=2&dbv=2&drs=3&pcs=1354x815&pss=1354x7619&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468804171&rw=815<u=http%3A%2F%2Fbbs.csdn.net%2Ftopics%2F350056033<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DSieD8j_piwnXESIUb2NBDAx3UYDd9Vvd2jCODN3eMMxVpZu4-v995SUgFvMFvGIP%26wd%3D%26eqid%3Dcc09fa2e001f649100000005578c2b7c&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468804171&qn=a04d6dd4e6e93544&tt=1468804171176.24.968.969" width="200" height="22" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: content-box; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">
-
id="iframeu1636204_0" src="http://pos.baidu.com/mcdm?rdid=1636204&dc=2&di=u1636204&dri=0&dis=0&dai=4&ps=3454x896&dcb=BAIDU_SSP_define&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1468804171195&ti=EXTJS%E4%B8%ADTreePanel%E5%92%8CTabPanel%E9%85%8D%E5%90%88%E4%BD%BF%E7%94%A8%E7%9A%84%E9%97%AE%E9%A2%98-CSDN%E8%AE%BA%E5%9D%9B-CSDN.NET-%E4%B8%AD%E5%9B%BD%E6%9C%80%E5%A4%A7%E7%9A%84IT%E6%8A%80%E6%9C%AF%E7%A4%BE%E5%8C%BA&ari=2&dbv=2&drs=3&pcs=1354x815&pss=1354x7619&cfv=0&cpl=4&chi=1&cce=true&cec=UTF-8&tlm=1468804171&rw=815<u=http%3A%2F%2Fbbs.csdn.net%2Ftopics%2F350056033<r=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DSieD8j_piwnXESIUb2NBDAx3UYDd9Vvd2jCODN3eMMxVpZu4-v995SUgFvMFvGIP%26wd%3D%26eqid%3Dcc09fa2e001f649100000005578c2b7c&ecd=1&psr=1920x1080&par=1920x1040&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1468804171&qn=a7c3bbc3df58912b&tt=1468804171176.25.303.306" width="200" height="22" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="box-sizing: content-box; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">