Ext4如何判断tabpanel是否已经存在某个tab

最新推荐文章于 2019-05-24 11:58:55 发布

转载最新推荐文章于 2019-05-24 11:58:55 发布 · 1.4k 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

Ext4如何判断tabpanel是否已经存在某个tab

　　ext4如何判断tabpanel中是否已经存在某个tab，如果存在就激活这个tab，否则重新打开tab。

　　原理：在tabpanel添加tab的时候增加tab的id配置，然后通过Ext.getCmp获取控件，如果不存在则添加此tab，否则调用tabpanel的setActiveTab方法激活此tab。

　　示例代码，点击左边菜单treepanel的叶子节点时，在右边的tabpanel中动态添加tab，在添加前判断是否已经打开过tab，打开则激活此tab，否则添加新tab项。

需要注意：treepanel的叶子节点id需要唯一，要不可能出错。

Ext4如何判断tabpanel是否已经存在某个tab

－收缩 HTML代码　　运行代码　　 [如果运行无效果，请自行将源代码保存为html文件运行]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4如何判断tabpanel是否已经存在某个tab </title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"> </script>
<script type="text/javascript">
     var tab = new Ext.TabPanel({
        region: 'center',
        deferredRender: false,
        activeTab: 0,
        resizeTabs: true, // turn on tab resizing
        minTabWidth: 115,
        tabWidth: 135,
        enableTabScroll: true
    });
    Ext.onReady( function () {
         var viewport = new Ext.Viewport({
            width: 1024,
            height: 620,
            layout: 'border', // border布局
            items: [{
                region: 'north', // 必须用region参数指定位置
                xtype: 'panel',
                height: 50,
                frame: true,
                split: false, // split属性是设置除了center区域外是否可调节大小
                html: '欢迎登录!',
                margins: '0 0 0 0'
                 // title: 'South Region is collapsible', //要想设置折叠必须设置title
                 // collapsible: true
            }, {
                region: 'south', // 必须用region参数指定位置
                xtype: 'panel',
                height: 50,
                frame: true,
                split: false, // split属性是设置除了center区域外是否可调节大小
                html: '欢迎登录!',
                margins: '0 0 0 0'
                 // title: 'South Region is collapsible', //要想设置折叠必须设置title
                 // collapsible: true
            }, {
                title: 'West Region is collapsible',
                region: 'west',
                xtype: 'panel',
                width: 200,
                collapsible: true, // 设置可折叠
                id: 'west-region-container',
                layout: 'fit',
                margins: '0 0 0 0',
                title: '管理系统',
                items: [{
                    xtype: 'treepanel',
                    title: '系统菜单',
                    expanded: true,
                    listeners: { itemclick: function (view, record, item, index, e, eOpts) {
                         if (record.get( 'leaf')) { //叶子节点
                             var id = record.get( 'id');
                             if (Ext.getCmp(id)) tab.setActiveTab(id);
                             else{ tab.add({ title: record.get( 'text'), html: 'tab内容--' + record.get( 'text'), closable: true, id: id });tab.setActiveTab(id); /*激活新的选项卡*/}
                        }
                    }
                    },
                    containerScroll: true,
                    root: {
                        text: '系统管理',
                        children: [{
                            text: '行政区划管理',
                            id: 'c1',
                            expanded: true,
                            children: [{
                                text: '行政区划管理1',
                                id: 'c11',
                                leaf: true
                            }, {
                                text: '行政区划管理2',
                                id: 'c12',
                                leaf: true
                            }]
                             /*
                            * href:"Grid.html",//节点的链接地址
                            * hrefTarget:"tab"//打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
                            */
                        }, {
                            text: '部门管理',
                            id: 'c2',
                            expanded: true,
                            children: [{
                                text: '部门管理1',
                                id: 'c21',
                                leaf: true
                            }, {
                                text: '部门管理2',
                                id: 'c22',
                                leaf: true
                            }]
                        }, {
                            text: '用户管理',
                            expanded: true,
                            id: 'c3',
                            children: [{
                                text: '用户管理1',
                                id: 'c31',
                                leaf: true
                            }, {
                                text: '用户管理2',
                                id: 'c32',
                                leaf: true
                            }]
                        }, {
                            text: '菜单管理',
                            expanded: true,
                            id: 'c4',
                            children: [{
                                text: '菜单管理1',
                                id: 'c41',
                                leaf: true
                            }, {
                                text: '菜单管理2',
                                id: 'c42',
                                leaf: true
                            }]
                        }]
                    },
                    viewConfig: {
                }
            }],
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'bottom',
                items: [{
                    text: "全部折叠",
                    listeners: {
                         "click": {
                            fn: function () {
                                 this.collapseAll();
                            },
                            scope: this
                        }
                    }
                }]
            }]
        }, tab // 初始标签页
        ]
    });
});
</script>
</head>
<body>
<div id='grid'> </div>
</body>
</html>