在整个应用程序中链接到页面的常量按钮

Question

我在每个页面的右上角都有一个按钮，我想链接到我的应用程序中的某个页面。有没有办法给这个按钮的每个实例提供相同的行为？如果是这样，代码会在哪里影响每一页？非常感谢提前。

查看：

items: [
            {
    title: '<span class="logo"></span>',
                            xtype: 'titlebar',
                            docked: 'top',
                            items: [
                                {
                                    xtype: 'button',
                                    align: 'right',
                                    iconAlign: 'right',
                                    id: 'buytickets',
                                    text: 'Buy Tickets'
                                }
                            ]
             }
]

控制器（特定于一页）：

config: {
    refs: {
        main: 'ListNav'
    },
    control: {
        "button#buytickets": {
            tap: 'buytickets'
        }
    }
},

buytickets: function(button, e, eOpts) {
    this.getMain().push({
        xtype: 'buyticketspanel'
    });
},

Answer 1

您可以将按钮放在视口顶部的app.js文件中：

Ext.application({
    name: 'MyApp',

    requires: [],    
    views: [/*Views*/],    
    controllers: [/*Controllers*/],

    viewport: {
        layout: 'vbox'
    },

    launch: function() {
        var me = this;

        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view
        Ext.Viewport.add([
            {
                title: '<span class="logo"/>',
                xtype: 'titlebar',
                docked: 'top',
                items: [
                    {
                        xtype: 'button',
                        align: 'right',
                        iconAlign: 'right',
                        id: 'buytickets',
                        text: 'Buy Tickets',
                        handler: me.doBuyTickets
                    }
                ]
            },
            Ext.create('MyApp.view.Main', {flex: 1})
        ]);
    },

    doBuyTickets: function() {
        //do stuff
    }
});

**** 修改* ***：

但是，您无法将该栏重新用作NestedView的标题栏。如果您需要这样做，那么最好使用一个utils文件，该文件具有向工具栏添加按钮的方法，并且只在任何NestedView组件的init函数中重用它。

Utils.js：

Ext.define("MyApp.util.Utils", {
    singleton: true,
    addBuyButton: function(toolbar)
    {
        toolbar.add({
            text: 'Buy Tickets',
            align: 'right',
            handler: function() {
                //do stuff
            }
        });
    }
});

控制器：

Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            nestedList: 'nestedlist'
        },
        control: {
            app-page: {
                initialize: 'initAppPage'
            }
        }
    },

    initAppPage: function()
    {
        MyApp.utils.addBuyButton(this.getNestedList().getNavigationBar());
    }
});