Question

我正在尝试获取视口的参考 - ＆gt; ToolBarView中心区域，单击工具栏中的注销按钮时，视口中的中心区域应设置为activeItem。请有人帮助我。

//视图

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

为了动态设置卡片，您需要使用setActiveTab上的tabpanel（请注意setActiveItem将会起作用，但未记录。）方法And here is a fiddle that shows a working example.成分

我建议在tabpanel中添加itemId以便于查询，否则您需要从click事件侦听器/处理程序中的按钮向上或向下移动。

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>'
            }]
        });

从视图访问视口中心区域并更改activeItem

1 个答案: