javascript - SenchaTouch 2 : Same toolbar used across the views is firing the same event multiple times

Question

背景: 我在所有 View 中使用相同的工具栏，该工具栏是在单独的 View 中定义的。该工具栏有四个按钮。由于该按钮具有 'id' 属性， View 中一个按钮上的点击事件也会触发其他 View 中类似的点击事件，因为跨 View 使用相同的工具栏。

我的工具栏如下。

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');
                }
            }, 
        ]
    },
}); 

我将其添加到项目配置中的不同 View 中，如下所示。

xtype : 'wuToolBar'

因此，单个 View 中按钮上的点击事件将触发所有 View 中的点击事件，因为此工具栏是跨页面共享的。如果我要删除 id 属性，然后应用程序工作正常，但我需要将 id 分配给按钮，因为我必须使用 getCmp 方法访问它们。

Answer 1

如果它存在于所有 View 上，那么我建议将其添加到您的 app.js 中，然后在从一个屏幕移动到另一个屏幕时简单地添加到视口(viewport):

在 app.js 中:

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

您可以稍后使用相同的方法添加 View (Ext.Viewport.add(...))，也可以使用 Ext.navigation.View component .