Extjs 中Tabpanel使用以及tab切换事件

布满荆棘的人生 2022-06-05 11:54 795阅读 0赞

# Extjs 中Tabpanel使用以及tab切换事件 #

在使用extjs开发中我们有时候会使用到标签页这种组件用于显示多种分类的信息，这里将简单介绍一下怎么使用。  
先看代码，具体是创建了一个窗口，这个窗口内再创建了一个TabPanel，其中第一个tab内部还嵌套了一个form表单。

j={code:'代码',name:'名称'}；
    var win = Ext.create('Ext.window.Window', {
            title: ('信息修改'),
            autoWidth: true,
            autoHeight: true,
            maximizable: true,
            maximized: false,
            width: 760,
            height: 500,
            modal: true,
            layout: 'fit',
            items: [{
                xtype: 'tabpanel',
                activeTab: 0,
                items: [{
                    title: '定义',
                    itemId: 'dy',
                    items: [{
                        xtype: 'form',
                        frame: true,
                        autoWidth: true,
                        autoHeight: true,
                        buttonAlign: 'center',
                        autoScroll: true,
                        defaults: {labelWidth: 80},
                        items: [{
                            xtype: 'textfield',
                            fieldLabel: '名称',
                            name: 'name',
                            value: j.name,
                            allowBlank: false,
                            emptyText: '请输入名称',
                            blankText: '名称不能为空'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '名称',
                            name: 'name',
                            value: j.name,
                            allowBlank: false,
                            emptyText: '请输入名称',
                            blankText: '名称不能为空'
                        }, {
                            xtype: 'textfield',
                            fieldLabel: '名称',
                            name: 'name',
                            value: j.name,
                            allowBlank: false,
                            emptyText: '请输入名称',
                            blankText: '名称不能为空'
                        }]
                    }]
                }, {
                    title: '要素',
                    html: 'Users',
                    itemId: 'zc'
                }, {
                    title: '图',
                    html: 'Tickets',
                    itemId: 'jg'
                }, {
                    title: '表',
                    html: 'Tickets',
                    itemId: 'ph'
                }, {
                    title: '体系',
                    html: 'Tickets',
                    itemId: 'zb'
                }, {
                    title: '评价',
                    html: 'Tickets',
                    itemId: 'yy'
                }, {
                    title: '建议',
                    html: 'Tickets',
                    itemId: 'fz'
                }],
                //tab切换事件
                listeners:{
                    'tabchange':function (t, n) {
                        alert(n.itemId);
                    }
                }
            }]
        }).show();

这样我们就建好了这个窗口了，可以进行展示我们的tab了，但是很多时候我们希望标签页的数据是通过异步加载来完成，只有在进行切换的时候才加载数据，因此这时候我们就要用到tabpanel提供的tabchange事件了。

//tab切换事件
                listeners:{
                    'tabchange':function (t, n) { 
                        alert(n.itemId);
                    }
                }

在上面的代码中看到具体的切换事件是怎么定义的，同时切换时候也提供了部分参数，因为常用到的应该就是要切换到的tab所以我列出的参数较少，具体可以参考extjs官方的说明，如下：

tabchange( tabPanel, newCard, oldCard, eOpts )
    Fires when a new tab has been activated (activated by setActiveTab).
    
    Parameters
    tabPanel : Ext.tab.Panel
    The TabPanel
    newCard : Ext.Component
    The newly activated item
    oldCard : Ext.Component
    The previously active item
    eOpts : Object
    The options object passed to Ext.util.Observable.addListener.

从字面意思大概也能知道具体的参数意思，我们就能对这些参数进行自定义操作。