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

Question

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

Answer 1

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}]}]

Answer 2

右边潜入一个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);
            }
        }
    }
}

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

采用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);
  }
  });

Answer 7

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

Answer 8

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