Question

How to bring a new view within a tab panel on button click?

This is the code for my view named test that contains buttons.This view is coming under a tab panel as described in the Main.js view. When I click on the buttons new list view is appearing . But it is not coming under the tab panel of Main.js .How can I bring it under the tab panel ? Here is the test view.

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

    }

});

And the view for ArtandCulture is :

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

And the Main view is:

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

You need to add your view into TabPanel container (tourism.view.Main), not Viewport. Add some id, to tabpanel, so it can be accessed from handler.

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