sencha-touch-2 - Sencha touch 2 引用事件的 html

Question

我的面板中有一些 html:

styleHtmlContent: true,
scrollable: true,

items: {
    docked: 'top',
    xtype: 'titlebar',
    title: 'List'
        },
    html: [
        "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>",
        "Text</div>"
    ].join("")

在我的 Controller 中

config: {
    refs: {
        abutton: '.abutton',
        abuttonbyid:'#abuttonbyid'
    },

    control: {
        abutton: {
            tap: 'onButtonTap'
        },
        abuttonbyid : {
            tap: 'onButtonTap'
        }
    },
},

onButtonTap: function() {
  console.log("Tapped");
}

我想要它，所以当点击 div 按钮时，我在我的 js 控制台/网络检查器中得到 Tapped。我同时使用了一个类和一个带有 id 的元素，因为我想将事件监听器附加到许多 div 按钮，而不是一个。许多 div 按钮，一个事件。

我需要使用 html 按钮而不是 Sencha 按钮。

Answer 1

为什么不直接在标题栏上添加一个按钮？

items: {
  docked: 'top',
  xtype: 'titlebar',
  title: 'List',
  items: [
    {
      xtype: 'button',
      text: 'Tap Me',
      handler: function() { console.log("button tap"); }
    }
  ]
}

编辑:既然你说你必须使用 html(这不是首选)，那么你可以添加一个委托(delegate)给你的 DOM 节点的自定义监听器:

items: {
  docked: 'top',
  xtype: 'titlebar',
  title: 'List',
  html: [
    "<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>",
    "Text</div>"
  ].join(""),

  // The new "listeners" code...
  listeners: {
    tap: {
      fn: function(event, el){ console.log("tapped!"); },
      element: 'element',
      delegate: '#abuttonbyid'
    }
  }
}

作为引用，我会在 event delegation 上查看此文档.