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

转自: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
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值