Question

我添加了一个导航视图（名为MainView）和一个按钮。当我单击按钮时，将显示下一个视图（在以下示例中，它称为DASHBOARD）。在仪表板中，当我点击另一个视图时，会显示另一个按钮。该视图的名称是MOREDETAILS。

但是，当我点击DASHBOARD视图中的按钮时，MOREDETAILS视图不会添加到导航视图中，甚至不会显示。

我该如何解决这个问题？

我的代码：

MAINVIEW

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'
            }
        ]
    }

});

Answer 1

在onMybutton10Tap，您在push上呼叫this，这是formpanel，而不是navigationview。在调用push之前，您需要获得对父级的引用。

首先，为您的第一堂课alias，让您可以使用xtype创建它：

Ext.define('MyApp.view.MainView', {
    extend: 'Ext.navigation.View',
    alias: 'widget.mainview'
    //...more here
});

然后使用up使用xtype：

获取对父级的引用

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

将视图添加到导航视图 - BEGINNER

1 个答案: