我有一个标签面板，它应该始终显示在页面底部。
此选项卡面板 (main.js) 有 3 个选项卡（主页、个人和待办事项）。这些选项卡是“面板”（home.js、persoon.js、todo.js）。
每个选项卡都有多个面板：
主页选项卡 --> home.js、homeOver.js、homeReset.js
人物选项卡 --> person.js、personAdd.js、personDetail.js
待办事项选项卡 --> todo.js、todoAdd.js、todoDetail.js
当我单击一个选项卡时，将显示正确的页面。当我点击让我们说主页选项卡时，将显示主页面板。当我在此面板中单击一个按钮以在同一选项卡（主页）中显示另一个面板时，该选项卡面板消失了。我该如何解决这个问题？
我使用以下功能更改页面：
Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
这是我的完整代码：
应用程序.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();
}
});
我希望我的问题很清楚。
在此先感谢您的帮助。