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

在按钮单击上查看tabpanel内部

1 个答案: