EXTJS中TreePanel和TabPanel配合使用的问题

[dreamlife]

刚开始学习使用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]
});

[zoujp_xyz]

右边潜入一个iframe

{
    xtype: "treepanel",
    border: false,
    autoScroll: true,
    animate: false,
    loader: new Ext.tree.TreeLoader({
        url: "",
        baseParams: {
            action: ""
        }
    }),
    root: new Ext.tree.AsyncTreeNode({
        text: "文档中心",
        expanded: true,
        id: "0"
    }),
    listeners: {
        click: function(node, e) {
            if (node.id == "0") return;
            var tabpanel = win.get(1).get(0);
            var n = tabpanel.getComponent(node.id);
            if (!n) {
                n = tabpanel.add({
                    id: node.id,
                    title: node.text,
                    closable: true,
                    html: '<iframe id="reporter-iframe" src=\'' + node.attributes.url + '\' frameborder="0" scrolling="auto" style="border:0px none;height:100%; width:100%;"></iframe>'
                });
                tabpanel.setActiveTab(n);
            } else {
                tabpanel.setActiveTab(n);
            }
        }
    }
}

[dreamlife]

谢谢您的答复，但是我想使用非iframe方式。

[zoujp_xyz]

用autoLoad也是一样的。

[dreamlife]

在菜单点击中就是使用的
layout: 'fit',
autoLoad: {
url: node.attributes.url,

[zoujp_xyz]

layout: 'fit',他的items下只能有一个组件

[dreamlife]

GetMenuTree.ashx返回的字符串为：
[{ID:'5',text:'书籍信息 ',leaf:true},
{ID:'3',text:'系统管理 ',leaf:false,children:[
{ID:'8',text:'菜单管理 ',href:'manager/menumanager.aspx？MenuTreeID=8',leaf:true},
{ID:'7',text:'用户管理 ',href:'manager/usermanager.aspx?MenuTreeID=7',leaf:true},
{ID:'10',text:'角色管理 ',href:'manager/rolemanager.aspx?MenuTreeID=10',leaf:true},
{ID:'11',text:'日志管理 ',href:'manager/logmanager.aspx?MenuTreeID=11',leaf:true}]}]

[dreamlife]

采用IBM_hoojo提供的方法，解决了问题。

[{ID:'5',text:'书籍信息 ',leaf:true},
{ID:'3',text:'系统管理 ',leaf:false,children:[
{ID:'8',text:'菜单管理 ',link:'manager/menumanager.aspx？MenuTreeID=8',leaf:true},
{ID:'7',text:'用户管理 ',link:'manager/usermanager.aspx?MenuTreeID=7',leaf:true},
{ID:'10',text:'角色管理 ',link:'manager/rolemanager.aspx?MenuTreeID=10',leaf:true},
{ID:'11',text:'日志管理 ',link:'manager/logmanager.aspx?MenuTreeID=11',leaf:true}]}]

不用href
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.link,
scope: this,
method: 'get', //post or get
params: { subMainId: node.id }, //传值
scripts: true, //支持页面所有的dom元素
text: '页面加载中，请稍候....'
}
})
tabMain.add(tab);
}
tabMain.setActiveTab(tab);
}
});

[下浪淘沙]

楼主,你真是太强大了,顶你,我刚好碰到类似的问题,不过我的是java struts2的,呵呵.

[gaoshanwlm]

那天还 看到那个 回答了 现在看不到了 不是csdn的错就是 楼主删了 这算什么 呀我草