I have a tabpanel which should always be shown at the bottom of the page.


This tabpanel (main.js) has 3 tabs (home, persoon and todo).
These tabs are "panels" (home.js, persoon.js, todo.js).


Every tab has multiple panels:


Home tab --> home.js, homeOver.js, homeReset.js


Persoon tab --> person.js, personAdd.js, personDetail.js


Todo tab --> todo.js, todoAdd.js, todoDetail.js




When I click at a tab, the correct page will be shown.
When I click at lets say the home tab, the home panel will be shown. When I click within this panel at a button to show another panel within the same tab (home), the tabpanel disappears.
How can I resolve this?


I change the page with the following function:
Code:
                       
    Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});







Here is my complete code:


**app.js:**
Code:
    Ext.application({
    name: 'app',


    controllers: ['HomeController', 'PersoonController'],
    views: ['Main'],


    launch: function() {
        Ext.Viewport.add({
             xclass: 'app.view.Main'
        });
    }
    });

**app.view.Main.js:**
Code:

    Ext.define('app.view.Main', {
    extend:'Ext.TabPanel',
    xtype: 'maincard',


    requires: [
        'app.view.Home',
        'app.view.Persoon',
        'app.view.Todo',
        'app.view.HomeOver',
        'app.view.HomeReset'
    ],


    config: {
        tabBar: {
            docked: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            { xtype: 'homecard' },
            { xtype: 'persooncard' },
            { xtype: 'todocard' }
        ]
    }
    });

**app.view.Home.js:**
Code:

    Ext.define('app.view.Home', {
    extend: 'Ext.Panel',
    alias: "widget.homePage",
    xtype: 'homecard',


    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home pagina',
        styleHtmlContent: true,


        items: [{
            docked: 'top',
            xtype: 'toolbar',
            title: 'Home',
            items: [
                {
                    xtype: "button",
                    text:    'Over',
                    action: 'ButtonHomeOverClicked'
                },
                {
                    xtype: "spacer"
                },
                {
                    xtype: "button",
                    text:    'Reset',
                    action: 'ButtonHomeResetClicked'
                    //action:
                }
            ]
        }
        ]
    }
    });
**app.view.HomeOver.js:**
Code:

    Ext.define('app.view.HomeOver', {
    extend: 'Ext.Panel',
    alias: "widget.homeover",
    xtype: 'homeovercard',
    requires: [
        'app.view.Home',
        'app.view.Persoon',
        'app.view.Todo'


    ],
    config: {
        iconCls: 'home',
        title: 'Home',
        html: 'Dit is de home over pagina',


        styleHtmlContent: true,
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Over pagina',
                items: [
                {
                    xtype: "button",
                    ui: "back",
                    text: "Terug",
                    action: "ButtonBackHome"
                }
                ]
            }
        ]
    }
    });







**app.controller.HomeController:**
Code:



         Ext.define("app.controller.HomeController", {
    extend: "Ext.app.Controller",


    config: {
        refs: {
            // We're going to lookup our views by xtype.
            overButton: "button[action=ButtonHomeOverClicked]",
            resetButton: "button[action=ButtonHomeResetClicked]",
            backButton: "button[action=ButtonBackHome]"
        },
        control: {
            overButton: {
                // The commands fired by the notes list container.
                tap: "onOverCommand"
            },
            resetButton: {
                // The commands fired by the notes list container.
                tap: "onResetCommand"
            },
            backButton: {
                tap: "onBackCommand"
            }
        }
    },


    onOverCommand: function () {
        console.log("Op home over knop gedrukt");
        this.changeScreenToOverPage();
    },
    onResetCommand: function () {
        console.log("Op home reset knop gedrukt");
        this.changeScreenToResetPage();
    },
    onBackCommand: function () {
        console.log("Op back knop gedrukt");
        this.changeScreenToHomePage();
    },




    changeScreenToOverPage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
    },
    changeScreenToResetPage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'homeresetcard'}, {type: 'slide', direction: 'left'});
    },


    changeScreenToHomePage: function () {
        console.log("Verander screen!");
        Ext.Viewport.animateActiveItem( { xtype : 'maincard'}, {type: 'slide', direction: 'right'});
       },




    // Base Class functions.
       launch: function () {
        this.callParent(arguments);
       // Ext.getStore("Notes").load();
        console.log("launch");
    },
    init: function () {
        this.callParent(arguments);
        console.log("init");
        //this.onOverCommand();
    }
    });
I hope my question is clear.


Thanks in advance for your help.