extjs - 在 extjs 中单击按钮时获得活动选项卡

Question

我只想在 extjs 代码中单击“保存”按钮上的活动选项卡。我的代码如下：

Ext.require([
    'Ext.tab.*',
    'Ext.window.*',
    'Ext.tip.*',
    'Ext.layout.container.Border'
]);

Ext.define('WebCare.UI.RoleManagerAdminWindow', {
    extend: 'Ext.window.Window',
    id: 'rolemanageradminwindow',
    modal: true,
    title: 'Manage Role & Permission',
    closable: true,
    closeAction: 'hide',
    width: 600,
    height: 550,
    minWidth: 700,
    minHeight: 200,
    layout: 'border',
    bodyStyle: 'padding: 5px;',

    listeners: {
        show: function (sender, eOpts) {
            var self = sender;
            vent.trigger("WindowLoad");
        }
    },
    items: [
        {
            id: 'rolemanageradmintab',
            region: 'center',
            xtype: 'tabpanel',

            constructor: function (config) {
                var self = this;
                self.callParent(config);
            },
            items: [
                {
                    xtype: 'rolemanagereditor',
                    id:'1'
                },
                {
                    xtype: 'agencyeditor',
                    id: '2'
                }
            ],
            listeners: {
                'tabchange': function (tabPanel, tab) {                
                }
            }
        }
    ],
    dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            defaults: { minWidth: 70 },
            style: {
                background: "#d6e3f3"//, "#d9ebff",
            },
            height: 40,
            items: [
                { xtype: 'component', flex: 1 },
                Ext.create('Ext.button.Button', {
                    height: 25,
                    text: 'Close',
                    disabled: false,
                    handler: function () {
                        this.up('.window').close();
                    }
                }),
                Ext.create('Ext.button.Button', {
                    height: 25,
                    text: 'Save',
                    disabled: false,
                    handler: function () {
                    }
                })
            ]
        }
    ]
});

Answer 1

单击“保存”按钮时，在选项卡面板中获取活动选项卡的简单示例。

Ext.onReady(function() {
    var tabPanel = Ext.create('Ext.tab.Panel', {
        width: 300,
        height: 200,
        activeTab: 0,
        items: [
            {
                title: 'Tab 1',
                bodyPadding: 10,
                html: 'A simple tab'
            },
            {
                title: 'Tab 2',
                html: 'Another one'
            },
            {
                title: 'Tab 3',
                html: 'Another one'
            }
        ],
        buttons: [
            {
                text: 'Save',
                handler: function() {
                    var activeTab = tabPanel.getActiveTab();
                    alert("The active tab in the panel is " + activeTab.title);
                }
            }
        ],
        renderTo: Ext.getBody()
    });
});