3

我的面板中有一些 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("")

在我的控制器中

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

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

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

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

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

4

1 回答 1

4

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

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

编辑：既然你说你必须使用 html （这不是首选），那么你可以添加一个委托给你的 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'
    }
  }
}

作为参考，我会查看有关事件委托的文档。

于 2013-02-07T17:31:09.190 回答