Sencha touch 2 html link for event
I have some html in my panel:
styleHtmlContent: true,
scrollable: true,
items: {
docked: 'top',
xtype: 'titlebar',
title: 'List'
},
html: [
"<div style='border-radius: 4px;' class='abutton' id='abuttonbyid'>",
"Text</div>"
].join("")
And in my controller
config: {
refs: {
abutton: '.abutton',
abuttonbyid:'#abuttonbyid'
},
control: {
abutton: {
tap: 'onButtonTap'
},
abuttonbyid : {
tap: 'onButtonTap'
}
},
},
onButtonTap: function() {
console.log("Tapped");
}
I want this to be when the div button is clicked I get Tapped
in my js console / web inspector. I did with both the class and the element with id because I would like to attach an event listener to multiple buttons div, not one. Many div buttons, one event.
I need to use html buttons instead of Sencha buttons.
+3
source to share
1 answer
Why not just add a button to your header?
items: {
docked: 'top',
xtype: 'titlebar',
title: 'List',
items: [
{
xtype: 'button',
text: 'Tap Me',
handler: function() { console.log("button tap"); }
}
]
}
EDIT: Since you say you need to use html (which is not preferred), you can add a custom listener delegated to your DOM node:
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'
}
}
}
For reference, I would look at this documentation on event delegation .
+4
source to share