javascript - ナビゲーション ビューへのビューの追加 - BEGINNER

Question

ナビゲーション ビュー (と呼ばれるMainView) とボタンを追加しました。ボタンをクリックすると、次のビューが表示されます (次の例では DASHBOARD と呼ばれます)。ダッシュボードには、クリックすると別のビューが表示される別のボタンがあります。そのビューの名前は MOREDETAILS です。

しかし、DASHBOARD ビューのボタンをクリックすると、MOREDETAILS ビューがナビゲーション ビューに追加されず、表示されません。

どうすればこれを解決できますか???

私のコード：

メインビュー

Ext.define('MyApp.view.MainView', {
extend: 'Ext.navigation.View',

config: {
    fullscreen: true,
    id: 'MainView',
    ui: 'light',
    modal: true,
    useTitleForBackButtonText: true,
    items: [
        {
            xtype: 'formpanel',
            title: 'TEST',

            layout: {
                type: 'card'
            },
            items: [

                {
                    xtype: 'button',
                    docked: 'bottom',
                    itemId: 'mybutton9',
                    ui: 'confirm',
                    iconAlign: 'right',

                    text: 'Click'
                }
            ]
        }
    ],
    listeners: [
        {
            fn: 'onMybutton9Tap',
            event: 'tap',
            delegate: '#mybutton9'
        }
    ]
},

onMybutton9Tap: function(button, e, eOpts) {
    this.push(Ext.create('MyApp.view.Dashboard',{
        title:'Dashboard'   
    }));
}

});

ダッシュボード

Ext.define('MyApp.view.Dashboard', {
    extend: 'Ext.form.Panel',

    config: {
        id: 'DashboardID',
        layout: {
            animation: 'slide',
            type: 'card'
        },
        modal: true,
        scrollable: 'vertical',
        items: [
            {
                xtype: 'list',
                id: 'ListItem',
                scrollable: true,
                itemTpl: [
                    '<div> blah blah</div>'
                ],
                store: 'MyJsonPStore',
                items: [
                    {
                        xtype: 'button',
                        docked: 'top',
                        itemId: 'mybutton10',
                        text: 'MyButton10'
                    }
                ]
            }
        ],
        listeners: [
            {
                fn: 'onMybutton10Tap',
                event: 'tap',
                delegate: '#mybutton10'
            }
        ]
    },

    onMybutton10Tap: function(button, e, eOpts) {
        this.push(Ext.create('MyApp.view.MoreDetails',{
            title:'Neeeeee'   
        }));
    }

});

MOREDETAILS

Ext.define('MyApp.view.MoreDetails', {
    extend: 'Ext.Panel',

    config: {
        id: 'MoreInfo',
        layout: {
            animation: 'slide',
            type: 'card'
        },
        scrollable: 'vertical',
        items: [
            {
                xtype: 'list',
                itemTpl: [
                    '<div>jhhhjhjhjhjhjh</div>'
                ],
                store: 'MyJsonPStore'
            }
        ]
    }

});