Sencha touch 2 Tabpanel在打开另一个面板时消失

我有一个选项卡面板，它应该总是显示在页面底部

这个选项卡面板（main.js）有3个选项卡（home、persoon和todo）。 这些选项卡是“面板”（home.js、persoon.js、todo.js）

每个选项卡都有多个面板：

主页选项卡-->Home.js、homeOver.js、homeReset.js

Persoon选项卡-->person.js、personAdd.js、Persondeail.js

Todo选项卡-->Todo.js、todoAdd.js、todoDetail.js

单击选项卡时，将显示正确的页面。 当我点击主页选项卡时，主页面板将显示出来。当我在该面板中单击某个按钮以显示同一选项卡（主页）中的另一个面板时，该选项卡面板将消失。 我如何解决这个问题

我使用以下功能更改页面：

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

这是我的完整代码：

app.js:

Ext.application({
name: 'app',

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

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

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

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

app.view.Main.js:

Ext.application({
name: 'app',

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

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

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

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

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

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.view.HomeOver.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:
            }
        ]
    }
    ]
}
});

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

应用程序控制器.家庭控制器：

Ext.application({
name: 'app',

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

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

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

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

我希望我的问题是清楚的

---

提前感谢您的帮助。

更新

以下是一些应该获得正确组件的代码：

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

---

问题是，如果要在视口中调用animateActiveItem，则需要在位于视口中的主卡xtype选项卡面板上调用它

如何实现？我是Sencha Touch的初学者，所以对我来说有点困难。