extjs TabPanel 中打开tab1和tab2出现混乱求助

上代码主页面的代码<%@ Page Language="C#" AutoEventWireup="true" CodeFile="main.aspx.cs" Inherits="main" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>网站后台管理系统</title>
    <script type="text/javascript" src="../ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-3.2.1/ext-all.js"></script>    <link rel="stylesheet" type="text/css" href="../ext-3.2.1/resources/css/ext-all.css" />

    <style type="text/css">
    html, body {
        font:normal 12px verdana;
        margin:0;
        padding:0;
        border:0 none;
        overflow:hidden;
        height:100%;
    }
    p {
        margin:5px;
    }
    .settings {
        background-image:url(../shared/icons/fam/folder_wrench.png);
    }
    .nav {
        background-image:url(../shared/icons/fam/folder_go.png);
    }
    </style>     


    <script type="text/javascript">
    Ext.onReady(function(){

        // NOTE: This is an example showing simple state management. During development,
        // it is generally best to disable state management as dynamically-generated ids
        // can change across page loads, leading to unpredictable results.  The developer
        // should ensure that stable state ids are set for stateful components in real apps.
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());


        var root=new Ext.tree.TreeNode({
        id:"root",
        text:"数据维护"});


        root.appendChild(new Ext.tree.TreeNode({
        id:"news",
        text:"新闻动态"
        }));


        root.appendChild(new Ext.tree.TreeNode({
        id:"message",
        text:"投诉建议"
        }));

        var tree=new Ext.tree.TreePanel({
        renderTo:"west",
        root:root,
        width:100,
        border: false
        });//绑定节点点击事件
    tree.on('click', function(node){
        if(node.id!='root'){
            //alert(node.id);
            //alert(node.text);

            var centerPanel = Ext.getCmp("MainTab");

             var tab = centerPanel.getComponent(node.id);
                if(!tab){

                            var newTab = centerPanel.add(new Ext.Panel({
                                        id : node.id, // tab的唯一id
                                        title : node.text, // tab的标题
                                        //iconCls : "zhangsong-treeNodeLeafIcon", // 图片
                                        layout : 'fit', // 填充布局,它不会让load进来的东西改变大小
                                        border : false, // 无边框
                                        closable : true  // 有关闭选项卡按钮
                //                        listeners : {
                //                            // 侦听tab页被激活里触发的动作
                //                            activate : this.onActiveTabSize,
                //                            scope : this
                //                        }



                                   }));

                                    centerPanel.setActiveTab(newTab);

                                    newTab.load({
                                    url : node.id+ '.aspx', // 请求服务器的地址
                                    method : "post", // post请求方式
                                    params : {
                                        // 这里是关键的一个参数，传给load页，布局的关键
                                        subMainId : ''
                                    },
                                    scope : this, // 范围
                                    discardUrl : true, // 丢弃url
                                    nocache : true, // 不缓存
                                    text : "加载中,请稍候……",
                                    timeout : 3000, // 延时3秒
                                    scripts : true
                                        // 允许执行script
                                    });

                                                 }
                else{
                        centerPanel.setActiveTab(tab);
                }







                                }
    });        var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
            // create instance immediately
            new Ext.BoxComponent({
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html:'<h1>网站后台管理系统</h1>'
                }
            }), {

                region: 'south',
                contentEl: 'south',
                split: true,
                height: 100,
                minSize: 100,
                maxSize: 200,
                collapsible: true,
                title: '消息提示框',
                margins: '0 0 0 0'
            },

            {
                region: 'west',
                id: 'west-panel', // see Ext.getCmp() below
                title: '导航栏',
                split: true,
                width: 200,
                minSize: 175,
                maxSize: 400,
                collapsible: true,
                margins: '0 0 0 5',
                layout: {
                    type: 'accordion',
                    animate: true
                },
                items: [{
                    contentEl: 'west',
                    title: '新闻栏',
                    border: false
                    //iconCls: 'nav' // see the HEAD section for style used
                },


                 {
                    title: '职位栏',
                    html: '<p></p>',
                    border: false
                    //iconCls: 'settings'
                }, {
                    title: '产品栏',
                    html: '<p></p>',
                    border: false,
                    //iconCls: 'settings'
                }]
            },
            // in this instance the TabPanel is not wrapped by another panel
            // since no title is needed, this Panel is added directly
            // as a Container
            new Ext.TabPanel({


                id:'MainTab',
                autoDestroy:false,
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,

                  layoutOnTabChange:true,
                activeTab: 0,     // first tab initially active


listeners:{
     activate:function(tab){
      tab.getUpdater().refresh();
     }
    },                items: [
                 {
                    contentEl: 'center1',
                    title: '向导',
                    autoScroll: true
                }]
            })]
        });
        // get a reference to the HTML element with id "hideit" and add a click listener to it
//        Ext.get("hideit").on('click', function(){
//            // get a reference to the Panel that was created with id = 'west-panel'
//            var w = Ext.getCmp('west-panel');
//            // expand or collapse that Panel based on its collapsed property state
//            w.collapsed ? w.expand() : w.collapse();
//        });
    });
    </script>
</head>
<body>
<form id="form1" runat="server">
    
    <div id="west" >

    </div>

    <div id="center1" class="x-hide-display">

    </div>
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">

    </div></form>
</body>
</html>

给你一段单击树节点动态添加tab的代码，tab中不是grid是嵌入了一个iframe，意思一样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);
                            }
                        }

id号重复了吧，
<div id="tooldiv">
    </div>

    <div id="grid">
两个tab页面id号重复了

我也出现这个问题，我使用的是ExtJs自动分配id

调试易

extjs TabPanel 中打开tab1和tab2出现混乱求助

解决方案 »

extjs TabPanel 中打开tab1和tab2出现混乱 求助

解决方案 »

extjs TabPanel 中打开tab1和tab2出现混乱求助