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

来源：互联网发布：淘宝店卖什么东西好编辑：程序博客网时间：2024/05/22 14:30

转自：http://www.coding123.net/article/20130828/Ext4-check-tabpanel-exist-tab.aspx

　　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

<!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 type="text/css" rel="stylesheet" href="js/ext-4.2.1.883/resources/css/ext-all.css" /><script type="text/javascript" src="js/ext-4.2.1.883/ext-all-debug.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: 30,                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: 30,                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                            }]                        }]                    },                    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>

转自：http://www.coding123.net/article/20130828/Ext4-check-tabpanel-exist-tab.aspx

0 0