0

ページの下部に常に表示されるタブパネルがあります。

このタブパネル (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();
}
});

私の質問が明確であることを願っています。

よろしくお願いします。

4

1 に答える 1

1

アップデート

適切なコンポーネントを取得する必要があるコードを次に示します。

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

問題は、ビューポートで animateActiveItem を呼び出していることです。ビューポートにあるメインカード xtype であるタブパネルで呼び出す必要があります。

于 2012-10-12T04:00:07.053 に答える