0

アプリケーション内の特定のページにリンクしたいすべてのページの右上にボタンがあります。このボタンの各インスタンスに同じ動作をさせる方法はありますか? もしそうなら、コードはどこに配置され、すべてのページに影響を与えますか? よろしくお願いします。

意見：

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

コントローラー (1 ページに固有):

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

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

1 に答える 1

0

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());
    }
});
于 2013-06-19T19:23:03.657 に答える