sencha-touch - 链接到整个应用程序页面的恒定按钮

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 函数中重用它即可。

实用程序.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());
    }
});