EXTJS中TreePanel和TabPanel配合使用的问题
刚开始学习使用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]
});
代码如下:
// 左边的菜单
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]
});
...全文
相关推荐
extjs学习笔记知识点总结
**ExtJs 结构树**:ExtJS 的结构树组件(Ext.tree.TreePanel)允许展示和操作层次结构的数据,支持拖放操作、节点展开/折叠、图标和文本定制等功能。2.
Extjs做的treepanel+tab切换页
**页面布局**:整个页面可能使用了ExtJS 的布局管理器,如`border`布局,将页面分为左侧和右侧两部分,左侧是TreePanel,右侧是可折叠的TabPanel。7.
再探Ext中TreePanel控件和TabPanel控件搭配测试
在本文中,我们将深入探讨ExtJS库中的两个关键组件——TreePanel和TabPanel,并了解如何将它们有效地结合在一起,以实现更丰富的用户界面。
treepanel 和 tabpanel 完整
通过上述方式,`TreePanel`和`TabPanel`的结合可以构建出强大且易于使用的界面,满足用户对层次结构数据的探索和多视图内容的切换需求。
ExtJs使用过程中积攒的一些东西
在使用ExtJs开发Web应用程序时,经常会遇到各种各样的组件和布局需求。下面是一些关于ExtJs使用的基础知识和常见技巧。1.


