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("")

在我的控制器中

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（这不是首选），那么你可以添加一个委托给你的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上查看此文档。

Sencha触摸2引用html进行事件

1 个答案: