1

背景: 別のビューで定義されているすべてのビューで同じツールバーを使用しています。このツールバーには 4 つのボタンがあります。このボタンには「id」属性があるため、同じツールバーがビュー全体で使用されるため、ビューからの 1 つのボタンのタップ イベントは、他のビューからも同様のタップ イベントをトリガーします。

私のツールバーは以下の通りです。

Ext.define("WU.view.WUToolBar", {
    extend: "Ext.Toolbar",
    alias: "widget.wuToolBar",
    xtype:"wuToolBar",
    config: {
        docked : 'bottom',
        cls : 'tabBar',
        ui:'widgetBottombarUI',
        items : [ 
            {
            xtype : 'button',
            text : 'My Account',
            cls : 'profileTabBar',
            id : 'myProfileButton',
            listeners : {
                tap : function(button, e, eOpts) {
                    console.log('myProfileButton is clicked');
                }
            }, 
            {
            xtype : 'button',
            text : 'Help',
            cls : 'helpTabBar',
            id : 'helpTabButton',
            listeners : {
                tap : function(button, e, eOpts) {
                    console.log('helpButton is clicked');
                }
            }, 
        ]
    },
});

以下のように、アイテム構成のさまざまなビューにこれを追加しています。

xtype : 'wuToolBar'

したがって、このツールバーはページ間で共有されるため、単一のビューのボタンのタップ イベントは、すべてのビューからタップ イベントを発生させます。getCmpid 属性を削除すると、アプリケーションは正常に動作しますが、メソッドを使用してアクセスする必要があるため、ボタンに id を割り当てる必要があります。

4

1 に答える 1

1

すべてのビューにある場合は、app.js に追加し、画面から画面に移動するときにビューポートに追加することをお勧めします。

app.js で:

...
launch: function() {
  ...
  // Add static components
  Ext.Viewport.add([
    {
      xtype: 'wuToolBar'
      docked: 'bottom' // I would recommend moving this out of your customized config
    }
  ]);
  ...
},
...

同じ方法 ( ) を使用して後でビューを追加することも、コンポーネントExt.Viewport.add(...)を使用することもでき ます。Ext.navigation.View

于 2013-02-21T00:03:37.667 に答える