从视图访问视口中心区域并更改活动项

Question

我正在尝试从工具栏视图中获取视口->中心区域的引用，当单击工具栏中的注销按钮时，视口卡0中的中心区域应设置为活动项目。请有人帮助我。

//视图

Ext.define('MyApp.view.ToolBarView', {
    extend: 'Ext.toolbar.Toolbar',
    xtype: 'bottom-toolbar',
    alias: 'widget.toolBar',
    height: 40,    
    items: [
            {
                xtype: 'tbfill'
            },
            {
                text: 'Home'
            },
            { 
                xtype: 'tbseparator'                        
            },
            {
                xtype: 'button',
                text: 'Settings',
                scale: 'medium',
                menu: [{
                        text:'My Profile'
                    },{
                        text:'Change Password'
                    },{
                        text:'View Options'
                    }]
            },
            {
                xtype: 'tbseparator'
            },
            {
                text: 'Logout',
                 handler: function() {
                    Ext.Msg.alert('Are you sure you want to logout??');
                    tex = button.up('toolbar'),//here i need to change viewport activeItem
                    tex.close()//close this toolbar view and logout and show loginView(card 0)
                }
            }               
            ]   
});

//My Viewport is
Ext.define('MyApp.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout: 'border',       
    requires: [
        'MyApp.view.LoginView',
        'MyApp.view.GridView',
        'MyApp.view.RegisterForm',
        'MyApp.view.TabView',       
        'MyApp.view.ToolBarView'        
    ],           
    items: [
    {
        region: 'north',
        border: false,      
        items:[
            {   xtype: 'image',
                src: 'images/logo.jpg',
                width:200,
                height:63
            }           
            ]
    },
    {
        region: 'south',
        html: 'Hello',
        xtype: 'toolbar',
        height: 25
    },
    {
        region: 'center',
        layout: 'card',
        activeItem: 0,
        items:
            [{
                id: 'card0',
                xtype: 'container',
                items:[ {xtype: 'loginView'}],
                region: 'center',               
                layout: {
                    type: 'vbox',
                    align: 'center',
                    pack: 'center'
                }
             },
             {
                id: 'card1',
                xtype: 'container',
                items:[ {xtype: 'registerForm'}],
                layout: {
                    type: 'vbox',
                    align: 'center',
                    pack: 'center'
                }
            },
            {
                items:[
                    {xtype: 'toolBar'},// this is the toolbar from which i need to access viewport and change the activeItem
                    {xtype: 'gridView'},
                    {xtype: 'tabView'}
                 ]
            }]
    }]
});

Answer 1

为了动态设置卡片，您需要在tabpanel组件上使用setActiveTab（请注意，它似乎setActiveItem可以工作，但没有记录）方法。

我建议在选项卡面板上添加一个itemId以使其易于查询，否则您将希望从单击事件侦听器/处理程序中的按钮向上或向下移动。

Ext.ComponentQuery.query('#myItemId')[0].setActiveTab(0);

这是一个小提琴，展示了一个工作示例。

以及小提琴中的代码，供本网站参考：

Ext.create('Ext.tab.Panel',{
            renderTo:Ext.getBody(),
            title:'My Tab Panel',
            itemId:'myTabPanel',
            tbar:['->',{
                text:'Logout',
                handler:function(btn){
                    Ext.ComponentQuery.query('#myTabPanel')[0].setActiveTab(0);
                }
            }],
            items:[{
                title:'Tab 1',
                html:'<h1>First Tab</h1>'
            },{
                title:'Tab 2',
                html:'<h1>Second Tab</h2>'
            }]
        });