ページの下部に常に表示されるタブパネルがあります。
このタブパネル (main.js) には 3 つのタブ (home、person、todo) があります。これらのタブは「パネル」 (home.js、persoon.js、todo.js) です。
各タブには複数のパネルがあります:
ホームタブ --> home.js、homeOver.js、homeReset.js
Person タブ --> person.js、personAdd.js、personDetail.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'
});
}
});
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();
}
});
私の質問が明確であることを願っています。
よろしくお願いします。