Question

我有一个tabpanel，应始终显示在页面底部。

此tabpanel（main.js）有3个标签（home，persoon和todo）。这些标签是“面板”（home.js，persoon.js，todo.js）。

每个标签都有多个面板：

主页标签 - ＆gt; home.js，homeOver.js，homeReset.js

Persoon标签 - ＆gt; person.js，personAdd.js，personDetail.js

Todo标签 - ＆gt; 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();
}
});

我希望我的问题很明确。

提前感谢您的帮助。

Answer 1

<强>更新

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

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

问题是你在视口上调用animateActiveItem，你需要在tabpanel上调用它，它是位于视口中的主卡xtype

打开另一个面板时，Tabpanel会消失

1 个答案: