Extjs4 单击按钮时在选项卡面板内查看

如何在单击按钮时在选项卡面板中显示新视图

这是包含按钮的名为test的视图的代码。该视图位于一个选项卡面板下，如Main.js视图中所述。当我点击按钮时，新的列表视图出现。但是它不在Main.js的选项卡面板下。我如何将它放在选项卡面板下？这是测试视图

Ext.define('tourism.view.test',{
    extend: 'Ext.Panel',
    requires:[
        'Ext.Label',
        'tourism.view.SampleView'
    ],
    xtype: 'test',
    config:{
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'container',
                layout: 'hbox',
                flex: 1,
                items:[

                    {
                        xtype: 'container',
                        layout: 'hbox',
                        flex: 1,
                        items:[
                            {
                                xtype:'button',
                                ui: 'plain',
                                centered:true,
                                html:'<img src="resources/images/ArtAndCulture.png" height="100%" width="100%" align="center">',
                                height: 100,
                                width: 200,
                                handler: function(button,event){
                                    var sample = Ext.create('tourism.view.ArtandCulture');
                                    Ext.Viewport.setActiveItem(sample);
                                }

                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: 'hbox',
                        flex: 1,
                        items:[
                            {
                                xtype:'button',
                                ui: 'plain',
                                centered:true,
                                html:'<img src="resources/images/Plantation&Garden.png" height="100%" width="100%" align="center">',
                                height: 100,
                                width: 200,
                                handler:function(){
                                     var sample = Ext.create('tourism.view.PlantationsandGardens');
                                    Ext.Viewport.setActiveItem(sample);
                                }
                            }
                        ]
                    }
                ]
            }
        ]

    }

});

---

您需要将视图添加到选项卡面板容器（

tourism.view.Main

），而不是视口。向tabpanel添加一些id，以便可以从处理程序访问它

handler: function(button,event){
    var sample = Ext.create('tourism.view.ArtandCulture');
    var tab = Ext.getCmp('TabPanelId')
    tab.add(sample);
    tab.setActiveTab(sample);
}

---

谢谢我应该在哪里定义tabpanelid？像Ext.define（“tourism.view.Main”），{extend:'Ext.tab.Panel'，id:'tabpanelid'。。。。

Ext.define("tourism.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                styleHtmlContent: true,
                layout: 'hbox',
                items:[
                    {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'tourism'
                    },
                    {
                        xtype: 'leftpanel',
                        flex: 1
                    },
                    {
                        xtype: 'rightpanel',
                        flex: 4

                    }
              ]
            },
            {
                title: 'About',
                iconCls: 'action',               
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Menu'
                    },
                    {
                        xtype: 'test'
                    }
                ]
            }          
        ]
    }
});

handler: function(button,event){
    var sample = Ext.create('tourism.view.ArtandCulture');
    var tab = Ext.getCmp('TabPanelId')
    tab.add(sample);
    tab.setActiveTab(sample);
}