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

Question

如何在按钮单击时在选项卡面板中带来新视图？

这是包含按钮的名为 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);
                                }
                            }
                        ]
                    }
                ]
            }
        ]

    }

});

ArtandCulture 的观点是：

Ext.define('tourism.view.ArtandCulture',{
    extend:'Ext.List',
    xtype:'artandculturelist',
    config:{
        title:'Arts and Culture',
        itemTpl:[
            '<img src="{image_url}" width="100px" height="100px">',
            '{name}','{category_name}'
        ],
        store:'AttractionMasters',
        onItemDisclosure:true
    }
});

主要观点是：

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

Answer 1

您需要将视图添加到 TabPanel 容器 ( tourism.view.Main)，而不是 Viewport。将一些 id 添加到 tabpanel，以便可以从处理程序访问它。

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