Tabpanel disappears when opening another panel

Question

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:

Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});

Here is my complete code:

app.js:

Ext.application({
name: 'app',

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

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

app.view.Main.js:

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:

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:

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:

     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.

Answer 1

UPDATE

Here is some code that should get the right component:

changeScreenToOverPage: function (button, e, eOpts) {
    var maincard = Ext.Viewport.getComponent(0).animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
    console.log("Verander screen!");    
}

The problem is that you are calling animateActiveItem on the viewport, you need to call it on the tabpanel which is your maincard xtype that sits in the viewport