Question

背景：我在所有视图中使用相同的工具栏，这是在单独的视图中定义的。此工具栏有四个按钮。由于此按钮具有'id'属性，从视图中点击一个按钮上的事件也会触发来自其他视图的类似点击事件，因为在视图中使用了相同的工具栏。

我的工具栏如下所示。

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'

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

Answer 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 component。

Sencha Touch 2：视图中使用的相同工具栏多次触发相同的事件

1 个答案: