1

背景：我在所有视图中使用相同的工具栏，该工具栏在单独的视图中定义。该工具栏有四个按钮。由于此按钮具有“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方法访问它们。

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 回答